Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

postcss-simple-vars

postcss2.1mMIT7.0.1TypeScript support: included

PostCSS plugin for Sass-like variables

postcss, css, postcss-plugin, sass, variables, vars

readme

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.

Sponsored by Evil Martians

Docs

Read full docs on GitHub.

changelog

Change Log

This project adheres to Semantic Versioning.

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.

6.0.3

  • Fixed compatibility with @define-mixin (by Sam Pullman).

6.0.2

  • Fixed compatibility with postcss-mixins.

6.0.1

  • Fixed PostCSS 8.1 compatability.
  • Added funding links.

6.0

  • Moved to PostCSS 8.
  • Moved postcss to peerDependencies.

5.0.2

  • Add keep option (by Mikhail Novikov).

5.0.1

  • Remove test files from npm package.

5.0

  • Use PostCSS 7 (by Douglas Duteil).
  • Remove Node.js 4 support.

4.1

  • Pass all variables to result.messages (by Carl Hopf).

4.0

  • Use PostCSS 6.0 API.

3.1

  • Add TypeScript definitions (by Paolo Roth).

3.0

  • Comment variables now must have special <<$(syntax)>>.
  • Add nested variables support like $(color$(idx)).

2.0

  • Support variables inside comments (by Vince Speelman).

1.2.0

  • Add onVariables option (by Duncan Beevers).

1.1.0

  • Allow to use variables in property names.

1.0.1

  • Fix variables with lead $ in variables option.

1.0

  • Use PostCSS 5.0 API.
  • Add unknown option.

0.3

  • Allow to use variables in variables values.
  • Accept function in variables option.
  • Support PostCSS 4.1 API.
  • Fix falling on non-string values in AST (by Anton Telesh).

0.2.4

  • Fix simple syntax variables in at-rule parameters.

0.2.3

  • Fix extra space on variables ignoring.

0.2.2

  • Fix undefined variable error message.

0.2.1

  • Fix look-behind regexp in simple syntax.

0.2

  • Allow to use simple syntax with minus like -$width.
  • Add support for multiple variables in one value.
  • Do not remove space before $var.

0.1

  • Initial release.