It is a PostCSS plugin that allow writing media queries properties on the same line.
$ npm install postcss-inline-media
// dependencies
postcss([ require('postcss-inline-media')() ])
Check out PostCSS docs for the complete installation.
.btn {
margin: 20px 10px @(max-width: 800px) 10px 5px;
}
will output:
.btn {
margin: 20px 10px;
}
@media (max-width: 800px) {
.btn {
margin: 10px 5px;
}
}
.btn {
color: blue @(max-width: 800px) red @(print) black;
}
will output:
.btn {
color: blue;
}
@media (max-width: 800px) {
.btn {
color: red;
}
}
@media print {
.btn {
color: black;
}
}
You can use postcss-simple-vars as media queries shortcut
$md: (max-width: 900px);
.btn {
padding: 20px @md 10px;
}
will output:
.btn {
padding: 20px;
}
@media (max-width: 900px) {
.btn {
padding: 10px;
}
}