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() {
var 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent