postcss-variable-media
v1.0.3
Published
PostCSS plugin that allows for defining custom variables to represent media queries
Downloads
59
Readme
PostCSS Variable Media
PostCSS plugin that allows for defining custom at-rules to represent media queries
/* before */
@tablet {
.selection {
background: #fff;
}
}
@desktop {
.selection {
background: #000;
}
}
/* after */
@media (min-width: 768px) {
.selection {
background: #fff;
}
}
@media (min-width: 1024px) {
.selection {
background: #000;
}
}
Usage
postcss([ require('postcss-variable-media') ])
See PostCSS docs for examples for your environment.
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Load PostCSS Variables as a PostCSS plugin:
postcss([
require('postcss-variables')({ /* options */ })
]);
Options
breakpoints
Type: Object
Default: {}
Specifies breakpoint variables and pixel min-width values.
require('postcss-variable-media')({
breakpoints: {
tablet: 768,
desktop: 1024
}
});
consolidate
Type: boolean
Default: true
Merge repeated breakpoint declarations and append to end of document. If set to false, breakpoints will be converted to media queries in place.
Note: If needing to consolidate across multiple stylesheets, refer to css-mqpacker.
require('postcss-variable-media')({
breakpoints: {
tablet: 768
},
consolidate: true
});
@tablet {
.block1 {
background: #fff;
}
}
@tablet {
.block2 {
font-size: 14px;
}
}
@media (min-width: 768px) {
.block1 {
background: #fff;
}
.block2 {
font-size: 14px;
}
}