PostCSS CSS var to Sass var

A PostCSS plugin to convert CSS variables to Sass variables

Installation

npm install postcss-css-var-to-sass-var

Examples

/* input */
:root {
  --color: black;
  --size: 15px;
}
div {
  --size: 20px;
  background: var(--color);
  font-size: var(--size);
}
p {
  font-size: var(--size);
}

/* output */
$color: black;
$size: 15px;
div {
  $size: 20px;
  background: $color;
  font-size: $size; // 20px
}
p {
  font-size: $size; // 15px
}

Usage

Postcss JS API

postcss([require('postcss-css-var-to-sass-var')]).process(yourCSS);

Gulp

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const varConvert = require('postcss-css-var-to-sass-var');
gulp.task('css', () => {
    gulp.src('path/to/dev/css')
        .pipe(postcss([
            varConvert()
        ]))
        .pipe(gulp.dest('path/to/build/css'));
});

Tests

npm test

License

This project is licensed under the MIT License.