postcss-simple-vars

What is postcss-simple-vars?

The postcss-simple-vars package is a PostCSS plugin that allows you to use Sass-like variables in your CSS. It simplifies the process of managing and reusing values across your stylesheets, making your CSS more maintainable and easier to read.

What are postcss-simple-vars's main functionalities?

Variable Declaration

You can declare variables using the `$` symbol and then use these variables throughout your CSS. This makes it easy to manage and update values in one place.

/* CSS */
$primary-color: #3498db;
$padding: 10px;

.button {
  background-color: $primary-color;
  padding: $padding;
}

Variable Interpolation

You can perform operations on variables using interpolation. This allows for dynamic calculations and more flexible styling.

/* CSS */
$size: 10px;

.icon {
  width: $(size * 2);
  height: $(size * 2);
}

Default Variables

You can set default values for variables using the `!default` flag. This ensures that a variable is only assigned a value if it hasn't been defined previously.

/* CSS */
$primary-color: #3498db !default;
$primary-color: #e74c3c;

.button {
  background-color: $primary-color;
}

Other packages similar to postcss-simple-vars

postcss-css-variables

The postcss-css-variables package allows you to use native CSS custom properties (variables) in a way that is compatible with older browsers. Unlike postcss-simple-vars, it focuses on providing a polyfill for native CSS variables rather than introducing a new syntax.

postcss-advanced-variables

The postcss-advanced-variables package extends the functionality of postcss-simple-vars by adding support for conditionals, loops, and more complex variable manipulations. It is more feature-rich but also more complex to use.

postcss-mixins

The postcss-mixins package allows you to create reusable chunks of CSS, similar to Sass mixins. While it doesn't focus solely on variables, it complements postcss-simple-vars by providing additional tools for code reuse and modularity.

README

PostCSS Simple Variables

PostCSS plugin for Sass-like variables.

You can use variables inside values, selectors and at-rule’s parameters.

$dir:    top;
$blue:   #056ef0;
$column: 200px;

.menu_link {
    background: $blue;
    width: $column;
}
.menu {
    width: calc(4 * $column);
    margin-$(dir): 10px;
}

.menu_link {
    background: #056ef0;
    width: 200px;
}
.menu {
    width: calc(4 * 200px);
    margin-top: 10px;
}

If you want be closer to W3C spec, you should use postcss-custom-properties and postcss-at-rules-variables plugins.

Also you should look at postcss-map for big complicated configs.

Interpolation

There is special syntax if you want to use variable inside CSS words:

$prefix: my-company-widget

$prefix { }
$(prefix)_button { }

Usage

postcss([ require('postcss-simple-vars') ])

See PostCSS docs for examples for your environment.

Options

Call plugin function to set options:

.pipe(postcss([ require('postcss-simple-vars')({ silent: true }) ]))

variables

Set default variables. It is useful to store colors or other constants in common file:

// config/colors.js

module.exports = {
    blue: '#056ef0'
}

// gulpfile.js

var colors = require('./config/colors');
var vars   = require('postcss-simple-vars')

gulp.task('css', function () {
     return gulp.src('./src/*.css')
        .pipe(postcss([ vars({ variables: colors }) ]))
        .pipe(gulp.dest('./dest'));
});

You can set a function returning object, if you want to update default variables in webpack hot reload:

postcss([
    vars({
        variables: function () {
            return require('./config/colors');
        }
    })
]

onVariables

Callback invoked once all variables in css are known. The callback receives an object representing the known variables, including those explicitly-declared by the variables option.

postcss([
    vars({
        onVariables: function (variables) {
            console.log('CSS Variables');
            console.log(JSON.stringify(variables, null, 2));
        }
    })
]

unknown

Callback on unknown variable name. It receives node instanc, variable name and PostCSS’ Result object.

postcss([
    vars({
        unknown: function (node, name, result) {
            node.warn(result, 'Unknown variable ' + name);
        }
    })
]

silent

Left unknown variables in CSS and do not throw a error. Default is false.

only

Set value only for variables from this object. Other variables will not be changed. It is useful for PostCSS plugin developers.