gulp-sass-vars-to-js

Gulp plugin to export sass variables to JavaScript

Helps keep your code and sass styles in sync

This gulp plugin enables you to reference your Sass variables in your TypeScript code.

First install gulp-sass-vars-to-js

npm install gulp-sass-vars-to-js --save-dev

Here's an example gulpfile.js to extract variables from your .scss file and output them to a .ts file.

1var gulp = require('gulp');
2var rename = require('gulp-rename');
3var sassVarsToJs = require('gulp-sass-vars-to-js');
4
5gulp.task('sassvars', function() {
6    gulp.src(['style/source.scss'])
7        .pipe(sassVarsToJs())
8        .pipe(rename('sassvars.ts'))
9        .pipe(gulp.dest('generated'))
10})
11
12gulp.task('default', ['sassvars'], function() {
13})

Here's an example scss file:

1$side-bar-width: 250px;
2
3.side-bar {
4   display: inline-block;
5   width: $side-bar-width;
6}

Note that the identifier is defined with a $ in the first column and that there is a semicolon at the end.

Here's the resulting .ts file that's generated:

1// This file was automatically generated. Do not edit by hand.
2
3export const SideBarWidth = 250;