postcss-at-rules-variables
PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else
Last updated a year ago by scrum .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install postcss-at-rules-variables 
SYNC missed versions from official npm registry.

postcss-at-rules-variables

PostCSS plugin to transform W3C CSS Custom Properties for at-rule’s parameters.

Travis Build StatusAppVeyor Build Statusnodenpm versionDependency StatusXO code styleCoveralls status

npm downloadsnpmPackage Quality

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

$ npm install postcss-at-rules-variables

Note: This project is compatible with node v8+

Usage

// 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

/* 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";
}
/* foo.css */
html {
    background-color: var(--color-danger);
    color: var(--nested-variable);
}
/* 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;
            }
        }
    }
}
/* baz.css */
h1 {
    font-size: 24px;
}

@import "biz.css";
/* biz.css */
h2 {
    color: olive;
}
/* 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

Current Tags

  • 0.1.10                                ...           latest (a year ago)

37 Versions

  • 0.1.10                                ...           a year ago
  • 0.1.9                                ...           a year ago
  • 0.1.8                                ...           a year ago
  • 0.1.7                                ...           2 years ago
  • 0.1.6                                ...           2 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           4 years ago
  • 0.0.27                                ...           4 years ago
  • 0.0.26                                ...           4 years ago
  • 0.0.25                                ...           4 years ago
  • 0.0.24                                ...           4 years ago
  • 0.0.23                                ...           4 years ago
  • 0.0.21                                ...           5 years ago
  • 0.0.20                                ...           5 years ago
  • 0.0.19                                ...           5 years ago
  • 0.0.18                                ...           5 years ago
  • 0.0.17                                ...           5 years ago
  • 0.0.16                                ...           5 years ago
  • 0.0.15                                ...           5 years ago
  • 0.0.14                                ...           5 years ago
  • 0.0.13                                ...           5 years ago
  • 0.0.11                                ...           5 years ago
  • 0.0.10                                ...           5 years ago
  • 0.0.9                                ...           5 years ago
  • 0.0.8                                ...           5 years ago
  • 0.0.7                                ...           5 years ago
  • 0.0.6                                ...           5 years ago
  • 0.0.5                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.1                                ...           5 years ago
  • 0.0.0                                ...           5 years ago

Copyright 2014 - 2016 © taobao.org |