postcss-get-sass-variables

PostCSS plugin to get an object containing SASS-style variables and their values

Installation

npm install --save-dev postcss-get-sass-variables

Usage

Write SASS-style variables in a css file:

$color: red;
$font-stack: Helvetica, Arial, sans-serif;
$other-color: $color; /* variables can reference other variables */

Then run it through postcss, providing a callback function to handle the resulting object:

const getVariables = require('postcss-get-sass-variables');

postcss([getVariables((obj) => {
  console.log(obj); // → { color: 'red', 'font-stack': 'Helvetica, Arial, sans-serif', 'other-color': 'red' }
})]).process(css);

Use this in combination with postcss-inline-variables for a simple and fast component + styleguide variable system!

const getVariables = require('postcss-get-sass-variables'),
  inlineVariables = require('postcss-inline-variables'),
  variables = {};

// grab variables from styleguide css files
postcss([getVariables((obj) => {
  Object.assign(variables, obj);
})]).process(styleguide)
  // then apply them to your other styles
  .then(() => postcss([inlineVariables(variables)]).process(componentStyles));