Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scrum/postcss-at-rules-variables
PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else and more...
https://github.com/scrum/postcss-at-rules-variables
at-rules css plugins postcss postcss-plugins property rules
Last synced: 14 days ago
JSON representation
PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else and more...
- Host: GitHub
- URL: https://github.com/scrum/postcss-at-rules-variables
- Owner: Scrum
- License: mit
- Created: 2015-10-08T14:14:53.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T02:30:03.000Z (over 1 year ago)
- Last Synced: 2024-10-24T13:07:18.910Z (21 days ago)
- Topics: at-rules, css, plugins, postcss, postcss-plugins, property, rules
- Language: JavaScript
- Homepage:
- Size: 2.32 MB
- Stars: 60
- Watchers: 2
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- Funding: .github/funding.yml
- License: license
Awesome Lists containing this project
README
# postcss-at-rules-variables 
> [PostCSS](https://github.com/postcss/postcss) plugin to transform [W3C CSS Custom Properties](http://www.w3.org/TR/css-variables/) for at-rule’s parameters.
[](https://travis-ci.org/Scrum/postcss-at-rules-variables)[](https://ci.appveyor.com/project/GitScrum/postcss-at-rules-variables)[]()[](https://www.npmjs.com/package/postcss-at-rules-variables)[](https://david-dm.org/Scrum/postcss-at-rules-variables)[](https://github.com/xojs/xo)[](https://coveralls.io/r/Scrum/postcss-at-rules-variables)
[](https://www.npmjs.com/package/postcss-at-rules-variables)[](https://www.npmjs.com/package/postcss-at-rules-variables)[](http://packagequality.com/#?package=postcss-at-rules-variables)
## Why?
Adds the ability to use a custom property in the options, at-rules.
*Used in conjunction with the plugin [postcss-each], [postcss-conditionals], [postcss-for] and more at-rules plugins.*
## Install
```bash
$ npm install --save-dev postcss postcss-at-rules-variables
```
> **Note:** This project is compatible with node v10+
## Usage
```js
// Dependencies
var fs = require('fs');
var postcss = require('postcss');
var colorFunction = require('postcss-color-function');
var atImport = require('postcss-import');
var atEach = require('postcss-each');
var atVariables = require('postcss-at-rules-variables');
var atIf = require('postcss-conditionals');
var atFor = require('postcss-for');
var cssVariables = require('postcss-css-variables');
var nested = require('postcss-nested');
// CSS to be processed
var css = fs.readFileSync('css/input.css', 'utf8');
// Process CSS
var output = postcss()
.use(atVariables({ /* atRules: ['media'] */ }))
.use(colorFunction())
.use(atEach())
.use(atImport({
plugins: [
require('postcss-at-rules-variables')({ /* options */ }),
require('postcss-import')
]
}))
.use(atFor())
.use(atIf())
.use(cssVariables())
.use(nested())
.process(css, {
from: 'css/input.css'
})
.css;
console.log(output);
```
> *Use postcss-at-rules-variables before you at-rules plugins*
# Example
```css
/* input.css */
:root {
--array: foo, bar, baz;
--from: 1;
--to: 3;
--icon-exclude: 2;
--color-danger: red;
--nested-variable: color(var(--color-danger) a(90%)) ;
}
@each $val in var(--array) {
@import "$val.css";
}
```
```css
/* foo.css */
html {
background-color: var(--color-danger);
color: var(--nested-variable);
}
```
```css
/* bar.css */
.some-class {
color: #fff;
@for $val from var(--from) to var(--to) {
@if $val != var(--icon-exclude) {
.icon-$val {
background-position: 0 $(val)px;
}
}
}
}
```
```css
/* baz.css */
h1 {
font-size: 24px;
}
@import "biz.css";
```
```css
/* biz.css */
h2 {
color: olive;
}
```
```css
/* Output example */
html {
background-color: red;
color: rgba(255, 0, 0, 0.9);
}
.some-class {
color: #fff;
}
.some-class .icon-1 {
background-position: 0 1px;
}
.some-class .icon-3 {
background-position: 0 3px;
}
h1 {
font-size: 24px;
}
h2 {
color: olive;
}
```
## Options
#### `atRules`
Type: `Array`
Default: `['for', 'if', 'else', 'each', 'mixin', 'custom-media']`
Description: *The array used in all at-rules in your project*
#### `variables`
Type: `Object`
Default: `{}`
Description: *Allows you to pass an object of variables for `:root`. These definitions will override any that exist in the CSS*
#### `declarationByWalk`
Type: `boolean`
Default: `false`
Description: *Searches for root declarations by traversing all declarations before interpolating them.*
> :warning: Attention, this approach is slower and carries the risk of overriding existing variables
[postcss-conditionals]: https://github.com/andyjansson/postcss-conditionals
[postcss-each]: https://github.com/outpunk/postcss-each
[postcss-for]: https://github.com/antyakushev/postcss-for
[testen repo]: https://github.com/egoist/testen