grunt-sass-scss

Grunt-sass

Dart Sass for Grunt (2021)

Compiles Sass / Scss to CSS.

A Dart implementation of Sass. Sass makes CSS fun again.

Why this plugin?

• [Primary implementation of Sass] Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It's fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows. Find out more or help out with its development on GitHub.
• [Warning:] LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass. Also Dart Sass has replaced Ruby Sass as the canonical implementation of the Sass language.
• [Using all the functionality] This library uses two Sass functions render and renderSync.
• [Unit tests] Tests are done.
• [Additional features] So far, there is one additional option. And I am open to adding any functionality that other people need, but if it does not break the current functionality.

Important info

renderSync is recommended for Dart Sass. You can read below why.

nex3

(Lead designer and developer of Sass)

The logic of compiling Sass—which is by far the bottleneck of Sass compilation—is inherently synchronous. There's nothing about parsing strings or manipulating ASTs that can be done out-of-process, so making it asynchronous doesn't buy you anything in terms of speed (and in fact makes it much slower because it has to bounce back to the event loop all the time). The only reason it has an asynchronous mode at all is to support asynchronous plugins.

The overhead of running Sass asynchronously tends to range between 2x and 3x the total synchronous compilation time for large projects, not to mention the memory overhead that @filipesilva is running into. This dwarfs file IO time, which means it's also likely to dwarf the benefits you'd get from increased parallelism while waiting on file IO.

Getting Started

npm install grunt-sass-scss --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-sass-scss');

The 'grunt-sass-scss' task

In your project's Gruntfile, add a section named sass to the data object passed into grunt.initConfig().

grunt.initConfig({
  sass: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
});

Options

options.function

• Type: String
• Default value: renderSync

The function that will be called to compile Sass. Possible values: renderSync | render

renderSync is recommended for Dart Sass.

Note however that by default, renderSync() is more than twice as fast as render(), due to the overhead of asynchronous callbacks.

To avoid this performance hit, render() can use the fibers package to call asynchronous importers from the synchronous code path. To enable this, pass the Fiber class to the fiber option:

var Fiber = require("fibers");

// ...
// Your option should be something like this
// See: https://sass-lang.com/dart-sass
options: {
  function: 'render',     
  sass: {
    importer: function(url, prev, done) {
      // ...
    },
    fiber: Fiber
  }
}
// ...

options.onError

• Type: Function
• Default value: null

This function is called when an error occurs and passes the error data.

options.sass

• Type: Object
• Default value: {}

Dart-Sass options.

Examples

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      main: {       
        files: {
          'src/css/main.css': 'src/scss/main.scss'
        }
      }     
    },
  });

  grunt.loadNpmTasks('grunt-sass-scss');
}

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      options: {      
        sass: {
          sourceMap: true
        }
      },   
      main: {       
        files: {
          'src/css/main.css': 'src/scss/main.scss'
        }
      }     
    },
  });

  grunt.loadNpmTasks('grunt-sass-scss');
}

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      options: {
        function: 'render',
        onError: function(error){

        },      
        sass: {
          sourceMap: true
        }
      },   
      main: {       
        files: [{
          expand: true,
          cwd: 'src/scss/',
          src: ['**/*.scss'],
          dest: 'src/css',
          ext: '.css'
        }]
      }     
    },
  });

  grunt.loadNpmTasks('grunt-sass-scss');
}