CODEWITHSUNDEEP
htmlcssnpmsassgulp
Ameer Khan
Ameer Khan

Reputation: 78

Is it possible to extract scss with a specific variable into css using gulp?

I'm using gulp to compile sass into css. Right now I have color variable defined in sass. In _varibales.scss.

  $color: #009999;

In app.scss I have used this variable in multiple places. 

    .button{
      color:$color
    }
    .background{
       background :$color 
       padding:10px
    }
    .element{
       margin:0 auto
    }

So is there a way to extract classes or id's having this variable and generate a new file called color.css using gulp?

Upvotes: 2

Views: 891

Answers (2)

Mark
Mark

Reputation: 181090

I have come up with this solution using line-reader:

var gulp = require("gulp");
var sass = require("gulp-sass");
var rename = require("gulp-rename");
var fs = require('fs');

// read a file line-by-line
var lineReader = require('line-reader');

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

  var myVar;
  var re;
  var s = "";  // will build up temp file with this variable

  fs.readFile('variabales.scss', 'utf8', function (err, contents) {

     // e.g., assumes a single line format like   $color: #009999;
     // myVar will = $color
    myVar = contents.split(/:/)[0].trim();

     // want to include lines that have a {, } or @ symbol on them
     // as well as the $___ sass variable
    re = new RegExp('(\\' + myVar + ')|{|}|@');
  });

  var readStream = fs.createReadStream('app.scss');
  lineReader.eachLine(readStream, function(line, last) {

    if (line.match( re )) {
      s += line + "\n";
    }   

    if (last) {

      fs.writeFileSync('temp.scss', s);

      gulp.src("temp.scss")
        // gulp-sass gets rid of the empty ruleset automatically!
        .pipe(sass().on('error', sass.logError))
        .pipe(rename('app.css'))
        .pipe(gulp.dest('./'));

      return false; // stop reading
    }
  })
});

Your app.scssfile should have an import statement at the very top like:

@import "variabales.scss";

.button{
    color : $color;
}

.background{
    background : $color;
    padding : 10px;
}

.element{
    margin : 0 auto;
}

So Sass can retrieve the variable from variabales.scss.

No doubt this could be improved by writing to a buffer instead of to a temp file or directly to a stream.

If you wanted your final app.css file to have more sass variables in it than just one, you could generalize this by modifying the regexp to match on "$" instead of the specific "$color".

  re = new RegExp('[\\${}@]');

And then you could rid of the fs. readFile call.

Here is the resulting app.css file:

.button {
  color: #009999; }

.background {
  background: #009999; }

Upvotes: 2

llobet
llobet

Reputation: 2790

You can do two tasks in gulp to extract separate files and then get them with a link in your document:

gulp.task('scss-variables', function() {
   return gulp.src('path/variables.scss')
        .pipe(gulp.dest('variables.css'))
});
gulp.task('scss-app', function() {
   return gulp.src('path/app.scss')
        .pipe(gulp.dest('app.css'))
});

But it is much more appropiate to import one file into the other with scss:

/* app.scss */
import 'variables';

.button{
  color:$color
}
.background{
   background :$color 
   padding:10px
}
.element{
   margin:0 auto
}

Upvotes: 0

Related Questions