Narcissistic Project Managers

    gulp-sass-vars

    1.1.5 • Public • Published

    gulp-sass-vars

    Inject variables in sass files from a js object.

    Usage

    npm install gulp-sass-vars
    var sassVars = require('gulp-sass-vars');
    
    gulp.task('sass', function() {
      const variables = {
        theme: null,
        url: 'https://github.com/giowe/gulp-sass-vars',
        font: {
          family: ["'Open Sans'", 'sans-serif'],
          size: '1.6em',
          color: 'rgb(0,0,0)',
          'line-height': 1.5
        },
        sizes: ['xs', 'sm', 'lg'],
        responsive: true,
        display: 'flex'
      };
    
      return gulp.src('src/styles/main.scss')
        .pipe(sassVars(variables, { verbose: true }))
        .pipe(sass())
        .pipe(gulp.dest('dist'));
    });

    This script will prepend the following code to your main.scss file:

    $theme: null;
    $url: 'https://github.com/giowe/gulp-sass-vars';
    $font: (
      'family': ('\'Open Sans\'', 'sans-serif'),
      'size': 1.6em,
      'color': rgb(0,0,0),
      'line-height': 1.5
    );
    $sizes: ('xs', 'sm', 'lg');
    $responsive: true;
    $display: 'flex';

    So you can use all those variables inside your sass file.

    Install

    npm i gulp-sass-vars

    DownloadsWeekly Downloads

    1,398

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    5.83 kB

    Total Files

    7

    Last publish

    Collaborators

    • giovanni.bruno