https://github.com/suhdev/gulp-sass-extractvars
Extract scss variables from sass files and replaces variables with branding settings.
https://github.com/suhdev/gulp-sass-extractvars
Last synced: 9 months ago
JSON representation
Extract scss variables from sass files and replaces variables with branding settings.
- Host: GitHub
- URL: https://github.com/suhdev/gulp-sass-extractvars
- Owner: suhdev
- Created: 2017-12-07T13:16:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-07T19:21:58.000Z (over 8 years ago)
- Last Synced: 2025-08-15T14:23:29.034Z (11 months ago)
- Language: CSS
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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);
});
});
```