0.0.81 • Published 2 years ago
@cookie_gg/postcss-responsive-easier v0.0.81
postcss-responsive-easier
PostCSS plugin that makes it easier to write responsive styles.
Install
npm i -D postcss @cookie_gg/postcss-responsive-easier
# or
yarn add -D postcss @cookie_gg/postcss-responsive-easier
Usage
You have to use this plugin with postcss-nested and set it after postcss-responsive-easier.
module.exports = {
...
plugins: [
// other plugins...
['@cookie_gg/postcss-responsive-easier', {
skip: '*',
breakpoints: ['1000px', '750px'],
}
],
['postcss-nested']
]
...
}
/* before */
h1 {
font-size: 50px | 25px | 30px;
}
/* after */
@media (min-width: 1001px) {
h1 {
font-size: 50px;
}
}
@media (min-width: 751px) and (max-width: 1000px) {
h1 {
font-size: 25px;
}
}
@media (max-width: 750px) {
h1 {
font-size: 30px;
}
}
Options
breakpoints: Array<String>
default:
['1000px', '750px']
Provide a custom set of breakpoints
skip: String
default: '*'
Define the skip syntax used to ignore portions of the shorthand.
Experimental
this is an experimental feature, so it will become reasons of error
You can use responsive separator |
in calc, var, rgb and rgba.
:root {
--spacing-s: 15px;
--spacing-m: 25px;
--spacing-l: 35px;
}
/* before */
h1 {
font-size: calc((50px | 25px | 30px) * (2 | 3 | 4));
padding: var((--spacing-s | --spacing-m | --spacing-l));
}
/* after */
@media (min-width: 1001px) {
h1 {
font-size: calc(50px * 2);
padding: var(--spacing-s);
}
}
@media (min-width: 751px) and (max-width: 1000px) {
h1 {
font-size: calc(25px * 3);
padding: var(--spacing-m);
}
}
@media (max-width: 750px) {
h1 {
font-size: calc(30px * 4);
padding: var(--spacing-l);
}
}
0.0.81
2 years ago
0.0.8-rc-6
2 years ago
0.0.8-rc-7
2 years ago
0.0.8
2 years ago
0.0.8-rc-5
2 years ago
0.0.8-rc-4
2 years ago
0.0.8-rc-3
2 years ago
0.0.8-rc-2
2 years ago
0.0.8-rc
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.1
2 years ago
0.0.2
2 years ago