postcss-simple-vars

PostCSS Simple Variables

PostCSS plugin for Sass-like variables.

You can use variables inside values, selectors and at-rule 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.

Look at postcss-map for big complicated configs.

Docs

Read full docs on GitHub.

Changelog

7.0.1

• Fixed types (by @Kaciras).

7.0

• Added escape sequences support (by @FelixZY).
• Removed Node.js 12 support.
• Removed Node.js 10 support.

Similar packages

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.