https://github.com/troch/postcss-responsive-values
A responsive function for postCSS
https://github.com/troch/postcss-responsive-values
Last synced: 12 months ago
JSON representation
A responsive function for postCSS
- Host: GitHub
- URL: https://github.com/troch/postcss-responsive-values
- Owner: troch
- License: mit
- Created: 2016-05-21T09:08:10.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-06-27T11:26:46.000Z (about 9 years ago)
- Last Synced: 2025-05-21T07:45:53.619Z (about 1 year ago)
- Language: JavaScript
- Size: 34.2 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-responsive-values
[PostCSS] Responsive values
[PostCSS]: https://github.com/postcss/postcss
```css
.my-class-name {
margin-top: responsive(whitespaceBase);
padding: responsive(whitespaceSmall) responsive(whitespaceBase) 0;
}
```
Will output (see Usage below)
```css
.my-class-name {
margin-top: 1.6rem;
padding: 1rem 1.6rem 0;
}
@media (min-width: 640px) {
.my-class-name {
margin-top: 2rem;
padding: 1.4rem 2rem 0;
}
}
```
## Usage
In your CSS, wrap responsive values names with `rv()` or `responsive()`. Each responsive value needs to be defined with:
- `value`: a default value
- `queries`: a map of media queries params -> responsive value
If you use multiple responsive values on a same rule declaration, then their media queries need to match or an exception will be thrown.
```js
var responsiveValues = require('postcss-responsive-values');
var values = {
whitespaceSmall: {
value: '1rem',
queries: {
'(min-width: 640px)': '1.4rem'
}
},
whitespaceBase: {
value: '1.6rem',
queries: {
'(min-width: 640px)': '2rem'
}
}
}
postcss([ responsiveValues({ values: values }) ])
```
## Variables
You can use this plugin with variables, just make sure you place this plugin before the postcss variable plugin you use.
See [PostCSS] docs for examples for your environment.