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

`css
/ input /
:root {
--color: black;
--size: 15px;
}
div {
--size: 20px;
background: var(--color);
font-size: var(--size);
}
p {
font-size: var(--size);
}
`
`scss
/ output /
$color: black;
$size: 15px;
div {
$size: 20px;
background: $color;
font-size: $size; // 20px
}
p {
font-size: $size; // 15px
}
`

Usage

$3

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

$3

`js
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.