PostCSS plugin postcss-simple-media.
All styles properties declared after the media property
to the end of the rule or to the next media property,
will be placed in the media query with the specified parameters
npm install --save-dev postcss-simple-media
or
npm -D HeadMad/postcss-simple-media
/*** Before ***/
.box {
width: 20%;
media: 960-;
width: 25%;
media: 560-800;
width: 50%;
media: 380+;
width: 100%;
}
/*** After ***/
.box {
width: 20%;
}
@media (max-width: 960px) {
.box {
width: 25%;
}
}
@media (min-width: 560px) and (max-width: 800px) {
.box {
width: 50%;
}
}
@media (min-width: 380px) {
.box {
width: 100%;
}
}
For value of media-property you can use standart syntax CSS media-query params, or shortcodes with next rules:
- Space between the parameters will be replaced with a keyword
and
- Exclamation mark (!) will be replaced with a keyword
not
- Renge of widths mast be without spaces:
560-1200
not560 - 1200
media: | @media |
---|---|
1200 | (width: 1200px) |
1600- | (max-width: 1600px) |
860+ | (min-width: 860px) |
380-960 | (min-width: 380px) and (min-width: 960px) |
960-380 | (min-width: 380px) and (min-width: 960px) |
all 960- | all and (max-width: 960px) |
(orientation: landscape) | (orientation: landscape) |
only screen, !print | only screen, not print |
Check you project for existed PostCSS config: postcss.config.js
in the project root, "postcss"
section in package.json
or postcss
in bundle config.
If you already use PostCSS, add the plugin to plugins list:
const simpleMedia = require('postcss-simple-media')
module.exports = {
plugins: [
simpleMedia
]
}
If you whant use another word of property, not media:
Just pass in plugin argument object width field prop
,
and value that you whant. Value can be String
or Regular Expression
const simpleMedia = require('postcss-simple-media')
module.exports = {
plugins: [
simpleMedia({prop: 'simple-media'})
]
}
If you do not use PostCSS, add it according to official docs and set this plugin in settings.
MIT