# gulp-sass-extractvars

> A simple GulpJS plugin to extract sass variables from sass files and optionally replace values with brand settings (variables). See examples below:

Latest version **1.0.1** (published 2017-12-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install gulp-sass-extractvars
pnpm add gulp-sass-extractvars
yarn add gulp-sass-extractvars
bun add gulp-sass-extractvars
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-12-07 |
| First published | 2017-12-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Suhail Abood |
| Maintainers | suhail |

## Links

- npm: https://www.npmjs.com/package/gulp-sass-extractvars
- Repository: https://github.com/suhdev/gulp-sass-extractvars
- Homepage: https://github.com/suhdev/gulp-sass-extractvars#readme
- Issues: https://github.com/suhdev/gulp-sass-extractvars/issues
- npm.io page: https://npm.io/package/gulp-sass-extractvars

## Dependencies (2)

- [pump](https://npm.io/package/pump.md) ^2.0.0
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.8

## Recent versions

- 1.0.1 (latest) — 2017-12-07
- 1.0.0 — 2017-12-07

## README

# gulp-sass-extractvars

A simple GulpJS plugin to extract sass variables from sass files and optionally replace values with brand settings (variables). See examples below: 


## Examples 

### 1. Default usage: 

```js

const gulp = require('gulp'),
    concat = require('gulp-concat'), 
    pump = require('pump'), 
    path = require('path'), 
    sassExtract = require('gulp-sass-extractvars'); 

gulp.task('default',(cb)=>{
    pump([
        gulp.src(['./sass/**/*.scss']),
        sassExtract(),
        concat('_vars.scss')
        gulp.dest('./myoutputdir')
    ],(err)=>{
        cb(err); 
    });
});

```

### 2. Using filters 

The plugin supports a filtering variable values i.e. intercepting the value that gets writting to the output file. 
This is ideal if you want to only change specific variables based on some settings. 

```js

//Replacing only variables that have the 'bg-color' or 'fg-color' keeping everything else as is. 

gulp.task('default',(cb)=>{
    pump([
        gulp.src(['./sass/**/*.scss']),
        sassExtract({
            data:{
                //extracted variables that have the value '#ffffff' will 
                //have their value replaced with '$brand-color-1'
                '#ffffff':'$brand-color-1'
            },
            //filter callback receives the name of the variable, the trimmed value 
            //which is the value after removing any white space and '!default' 
            //the original value
            //lines is an array to allow adding customised lines to the output before the 
            //variable gets added to the output, and vars is any variables that have pre-defined 
            //value. See example 3 for more details. 
            filter(name,trimmed,val,lines,vars){
                if (name.indexOf('fg-color') !== -1 || name.indexOf('bg-color') !== -1){
                    return vars[trimmed]; 
                }
                return trimmed;
            }
        }),
        concat('_vars.scss')
        gulp.dest('./myoutputdir')
    ],(err)=>{
        cb(err); 
    });
});

```


### 3. Using brandingVariablesFile 

You can also provide a path to a file containing all your branding variables. You can use this to fine tune variable values replacements. 

```js

gulp.task('default',(cb)=>{
    pump([
        gulp.src(['./sass/**/*.scss']),
        sassExtract({
            brandingVariablesFile:path.resolve(process.cwd(),'./_settings.scss'),
            //filter callback receives the name of the variable, the trimmed value 
            //which is the value after removing any white space and '!default' 
            //the original value
            //lines is an array to allow adding customised lines to the output before the 
            //variable gets added to the output, and vars is any variables that have pre-defined 
            //value. See example 3 for more details. 
            filter(name,trimmed,val,lines,vars){
                if (name.indexOf('fg-color') !== -1 || name.indexOf('bg-color') !== -1){
                    return vars[trimmed]; 
                }
                return trimmed;
            }
        }),
        concat('_vars.scss')
        gulp.dest('./myoutputdir')
    ],(err)=>{
        cb(err); 
    });
});

```


### 4. Using varNameRegex 

You can pass a regex to test the variable name against it. If the test succeeds, the variabe value will be changed with
its corresponding value from the supplied settings. 

```js


gulp.task('default',(cb)=>{
    pump([
        gulp.src([path.resolve(process.cwd(), './sass/*.scss')]),
        sass({
            varNameRegex:/(fg-color|bg-color|font-size|padding-y|padding-x)/,
            brandingVariablesFile:path.resolve(__dirname,'_settings.scss'),
        }),
        concat('_extracted.scss'),
        gulp.dest(path.resolve(process.cwd(), './dist'))
    ],(err)=>{
        cb(err); 
    });
});

```

---
_Source: https://npm.io/package/gulp-sass-extractvars · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._