Neptune's Potato Monsters

    This package has been deprecated

    Author message:

    Project is no longer maintained, use gulp-sass-monster

    gulp-sass-extended

    1.0.3 • Public • Published

    gulp-sass-extended

    fork of gulp-sass

    This project is an fork of gulp-sass
    so look at first original version - https://github.com/dlmanning/gulp-sass


    Project is deprecated and no longer maintained

    Use new project gulp-sass-monster


    Options and features

    They work the same as the original >

    Extended options

    addVariables

    type Object
    default undefined

    Add your custom vars in gulp task.

    This option is useful only if you calculate some conditions and want to add result values to sass render.
    Static properties are easier to set in the files themselves.

    Little details about values for this option:

    • each property - will be Sass variable;
    • if inner property will be an array - it's make Sass list,
    • if object - Sass map
    • Note You should not have more than one level of nesting in objects and arrays. Otherwise you will receive incorrect data

    Usage example

    var gulp = require('gulp');
    var sassExtended = require('gulp-sass-extended');
     
     
    gulp.task('styles', function() {
        
        var taskOptions = {
            // original gulp-sass options
            // ...
            addVariables: {
                PRODUCTION: yourProductionValue,
                someOtherDynamicVar: calculatedValue, // '12px' for example
                myColorsMap: {
                    color1: 'blue',
                    color2: 'yellow',
                },
                pointList: [
                    '1024px',
                    '1280px',
                    '1366px'
                ]
            }
        };
        
        return gulp.src('./src/styles/*.scss')
            .pipe( sassExtended(taskOptions) )
            .pipe( gulp.dest('./dist/css') );
    });

    In *.scss files before send to node-sass render, will be added part of code with your vars in file content beginning

    /* generated */ $PRODUCTION: true;
    /* generated */ $someOtherDynamicVar: 12px;
    /* generated */ $myColorsMap: (color1blue, color2yellow);
    /* generated */ $pointList: (1024px, 1280px, 1366px);
    /// then your code from file 

    If the content of your *.scss contains the @charset directive, the variables will be inserted after this directive

    Impact on sourcemaps

    You will notice some inconsistencies in line numbers in sourcemaps and in the original files. The more you add variables, the greater this discrepancy, because you will shift down the main content of the file.

    errorHandler(error, throughCallback)

    type function
    default undefined

    Add your custom method to handle errors.

    afterRender(result, renderedFile)

    type function
    default undefined

    Do with it whatever you want on your own risk ))))

    Remember that result is a reference to an object that will be further processed taking into account the use of sourcemaps and saving new css files
    And the changes inside it will also be in the main object

    Tests

    Here only original tests from the gulp-sass

    Contributing

    This project is an fork of gulp-sass
    so look at first original - gulp-sass/CONTRIBUTING.md

    If you have problems with the tools that were added in gulp-sass-extended version then go here gulp-sass-extended/issues

    Install

    npm i gulp-sass-extended

    DownloadsWeekly Downloads

    10

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • dutchenkooleg