https://github.com/giowe/gulp-sass-vars

Inject variables in sass files
https://github.com/giowe/gulp-sass-vars

Last synced: about 2 months ago
JSON representation

Inject variables in sass files

• Host: GitHub
• URL: https://github.com/giowe/gulp-sass-vars
• Owner: giowe
• Created: 2016-08-23T13:33:58.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T06:03:13.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T05:30:20.268Z (5 months ago)
• Language: JavaScript
• Size: 392 KB
• Stars: 14
• Watchers: 2
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        


  

    

  



# gulp-sass-vars



	

	

	

	



Inject variables in sass files from a js object.

## Usage

``` bash

npm install gulp-sass-vars

```

```js

var sassVars = require('gulp-sass-vars');

gulp.task('sass', function() {

  const 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:

```scss

$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.