postcss-closure-variables

PostCSS plugin to enable GWT/Closure stylesheet variables with conditionals

Usage no npm install needed!

<script type="module">
  import postcssClosureVariables from 'https://cdn.skypack.dev/postcss-closure-variables';
</script>

README

PostCSS Closure Variables Build Status

PostCSS plugin to enable GWT/Closure stylesheet variables with conditionals.

Examples

Standard usage

@def BLUE_500 #00a6fb;

.foo {
  color: BLUE_500;
}

.foo {
  color: #00a6fb;
}

With conditionals

@def VALUE 4;

@if(VALUE < 3) {
  @def COLOR blue;
} @elseif(VALUE < 5) {
  @def COLOR red;
} @else {
  @def COLOR black;
}

body {
  background-color: COLOR;
}

body {
  background-color: red;
}

Usage

postcss([ require('postcss-closure-variables') ])

See PostCSS docs for examples for your environment.