Gathering detailed insights and metrics for gulp-sass-external-variables
Gathering detailed insights and metrics for gulp-sass-external-variables
Gathering detailed insights and metrics for gulp-sass-external-variables
Gathering detailed insights and metrics for gulp-sass-external-variables
Parses and external JSON source, injecting properties which are subsequently available as part of SASS processing
npm install gulp-sass-external-variables
Typescript
Module System
Node Version
NPM Version
JavaScript (98.02%)
CSS (1.98%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
22 Commits
1 Watchers
2 Branches
1 Contributors
Updated on Aug 19, 2016
Latest Version
0.0.3
Package Id
gulp-sass-external-variables@0.0.3
Size
5.08 kB
NPM Version
3.5.3
Node Version
5.2.0
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Parses and external JSON source, injecting properties which are subsequently available as part of SASS processing
Note: This is heavily based on the seemingly inactive gulp-json-sass so much of the credit must go to it's author.
My beef with the current solution, is it's not the greatest at handling complex object structures, and I wanted a way to parse JSON.array
values to SASS Lists.
It also tripped up if you tried to pass it anything other than numerical values.
Coming Soon:
This process is useful for setting up global variables and flags that effect what your final .css
file will contain - for example if you wanted to produce multiple themed based instances of a core CSS file based on build-time iterations.
The usual npm jive to install module and all it's dependencies...
npm i --save gulp-sass-external-variables
Once installed the package is interfaced directly into your gulp task as part of your normal SASS compilation.
The module requires a .json
file to complete; the contents of which are injected in to the files and subsequently available
Personally I'm a fan of gulp-load-plugins
to do the heavy lifting of creating your package varialbes, but for verbosities sake, the below examples define these manually
1var jsonSass = require('gulp-json-sass'), 2 gulp = require('gulp'), 3 concat = require('gulp-concat'), 4 sass = require('gulp-ruby-sass'); 5 6gulp.task('sass', function() { 7 return gulp 8 .src(['./external.json', '/path/to/your/base/sass/file.scss']) 9 .pipe(sassExternalVariables({ 10 sass: false 11 })) 12 .pipe(concat('output.sass')) 13 .pipe(sass()) 14 .pipe(gulp.dest('dest/')); 15}); 16
This will build a new .css file named output to the dest folder. So assuming you also had the following:
In the root of your project a file external.json
1{ 2 "best-olympics": "London", 3 "array-to-list": [ "gold", "silver", "bronze" ], 4 "second": { 5 "best": "Rio" 6 } 7}
... and where ever you store you main SASS library, a file file.scss
1@each $item in $array-to-list { 2 .medal--#{$item} { 3 content: '#{$item}'; 4 } 5} 6 7div.heading { content: $best-olympics; } 8div.subheading { content: $second-best; }
Note the injected code is inserted at the very top of this document.
This will result in the below CSS being generated
1.medal--gold { content: 'gold'; } 2.medal--silver { content: 'silver'; } 3.medal--bronze { content: 'bronze'; } 4div.heading { content: 'London'; } 5div.subheading { content: 'Rio'; }
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
Found 0/20 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
license file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More