• Stars
    star
    848
  • Rank 51,796 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated 16 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Compile Sass to CSS.

grunt-contrib-sass v2.0.0 Build Status: Linux Build Status: Windows

Compile Sass to CSS

Getting Started

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-contrib-sass --save-dev

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

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

Sass task

Run this task with the grunt sass command.

Sass is a preprocessor that adds nested rules, variables, mixins and functions, selector inheritance, and more to CSS. Sass files compile into well-formatted, standard CSS to use in your site or application.

This task requires you to have Ruby and Sass installed. If you're on OS X or Linux you probably already have Ruby installed; test with ruby -v in your terminal. When you've confirmed you have Ruby installed, run gem install sass to install Sass.

Note: Files that begin with "_" are ignored even if they match the globbing pattern. This is done to match the expected Sass partial behaviour.

Options

sourcemap

Type: String
Default: auto

Values:

  • auto - relative paths where possible, file URIs elsewhere
  • file - always absolute file URIs
  • inline - include the source text in the sourcemap
  • none- no sourcemaps

Requires Sass 3.4.0, which can be installed with gem install sass

trace

Type: Boolean
Default: false

Show a full traceback on error.

unixNewlines

Type: Boolean
Default: false on Windows, otherwise true

Force Unix newlines in written files.

check

Type: Boolean
Default: false

Just check the Sass syntax, does not evaluate and write the output.

style

Type: String
Default: nested

Output style. Can be nested, compact, compressed, expanded.

precision

Type: Number
Default: 5

How many digits of precision to use when outputting decimal numbers.

quiet

Type: Boolean
Default: false

Silence warnings and status messages during compilation.

compass

Type: Boolean
Default: false

Make Compass imports available and load project configuration (config.rb located close to the Gruntfile.js).

debugInfo

Type: Boolean
Default: false

Emit extra information in the generated CSS that can be used by the FireSass Firebug plugin.

lineNumbers

Type: Boolean
Default: false

Emit comments in the generated CSS indicating the corresponding source line.

loadPath

Type: String|Array

Add a (or multiple) Sass import path.

require

Type: String|Array

Require a (or multiple) Ruby library before running Sass.

cacheLocation

Type: String
Default: .sass-cache

The path to put cached Sass files.

noCache

Type: Boolean
Default: false

Don't cache to sassc files.

bundleExec

Type: Boolean
Default: false

Run sass with bundle exec: bundle exec sass.

update

Type: Boolean
Default: false

Only compile changed files.

Examples

Example config

grunt.initConfig({
  sass: {                              // Task
    dist: {                            // Target
      options: {                       // Target options
        style: 'expanded'
      },
      files: {                         // Dictionary of files
        'main.css': 'main.scss',       // 'destination': 'source'
        'widgets.css': 'widgets.scss'
      }
    }
  }
});

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

grunt.registerTask('default', ['sass']);

Compile

grunt.initConfig({
  sass: {
    dist: {
      files: {
        'main.css': 'main.scss'
      }
    }
  }
});

Concat and compile

Instead of concatenating the files, just @import them into another .sass file eg. main.scss.

Compile multiple files

You can specify multiple destination: source items in files.

grunt.initConfig({
  sass: {
    dist: {
      files: {
        'main.css': 'main.scss',
        'widgets.css': 'widgets.scss'
      }
    }
  }
});

Compile files in a directory

Instead of naming all files you want to compile, you can use the expand property allowing you to specify a directory. More information available in the grunt docs - Building the files object dynamically.

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        expand: true,
        cwd: 'styles',
        src: ['*.scss'],
        dest: '../public',
        ext: '.css'
      }]
    }
  }
});

Release History

  • 2020-03-04   v2.0.0   Update dependencies. Now requires at least Node 8.
  • 2016-03-04   v1.0.0   Bump chalk. Update to docs and project structure.
  • 2015-02-06   v0.9.0   Remove banner option. Allow using --force to ignore compile errors. Increase concurrency count from 2 to 4. Improve Windows support.
  • 2014-08-24   v0.8.1   Fix check option.
  • 2014-08-21   v0.8.0   Support Sass 3.4 Source Map option. Add update option.
  • 2014-08-09   v0.7.4   Fix bundleExec option. Fix os.cpus() issue. Log sass command when --verbose flag is set.
  • 2014-03-06   v0.7.3   Only create empty dest files when they don't already exist.
  • 2014-02-02   v0.7.2   Fix error reporting when Sass is not available.
  • 2014-01-28   v0.7.1   Fix regression of Bundler support.
  • 2014-01-26   v0.7.0   Improve Windows support.
  • 2013-12-10   v0.6.0   Ignore files where filename have leading underscore.
  • 2013-08-21   v0.5.0   Add banner option.
  • 2013-07-06   v0.4.1   Use file.orig.src if file.src does not exist and return early to avoid passing non-existent files to sass binary.
  • 2013-06-30   v0.4.0   Rewrite task to be able to support Source Maps. Compile Sass files in parallel for better performance.
  • 2013-03-26   v0.3.0   Add support for bundle exec. Make sure .css files are compiled with SCSS.
  • 2013-02-15   v0.2.2   First official release for Grunt 0.4.0.
  • 2013-01-25   v0.2.2rc7   Updating grunt/gruntplugin dependencies to rc7. Changing in-development grunt/gruntplugin dependency versions from tilde version ranges to specific versions.
  • 2013-01-09   v0.2.2rc5   Updating to work with grunt v0.4.0rc5. Switching to this.files API. Add separator option.
  • 2012-11-05   v0.2.0   Grunt 0.4 compatibility. Improve error message when Sass binary couldn't be found
  • 2012-10-12   v0.1.3   Rename grunt-contrib-lib dep to grunt-lib-contrib.
  • 2012-10-08   v0.1.2   Fix regression for darwin.
  • 2012-10-05   v0.1.1   Windows support.
  • 2012-09-24   v0.1.0   Initial release.

Task submitted by Sindre Sorhus

This file was generated on Thu Aug 20 2020 12:31:17.

More Repositories

1

grunt

Grunt: The JavaScript Task Runner
JavaScript
12,255
star
2

grunt-contrib-watch

Run tasks whenever watched files change.
JavaScript
1,981
star
3

grunt-contrib-uglify

Minify files with UglifyJS.
JavaScript
1,481
star
4

grunt-contrib-imagemin

Minify PNG, JPG, GIF and SVG images.
JavaScript
1,214
star
5

grunt-contrib-concat

Concatenate files.
JavaScript
809
star
6

grunt-contrib-cssmin

Compress CSS files.
JavaScript
795
star
7

grunt-contrib-copy

Copy files and folders.
JavaScript
729
star
8

grunt-contrib-connect

Start a static web server.
JavaScript
717
star
9

grunt-contrib-jshint

Validate files with JSHint.
JavaScript
710
star
10

grunt-cli

Grunt's command line interface.
JavaScript
708
star
11

grunt-contrib-less

Compile LESS files to CSS.
JavaScript
671
star
12

grunt-contrib-compass

Compile Compass to CSS.
JavaScript
626
star
13

grunt-contrib-clean

Clear files and folders.
JavaScript
516
star
14

grunt-contrib-requirejs

Optimize RequireJS projects using r.js.
JavaScript
504
star
15

grunt-contrib

[DEPRECATED] A collection of common grunt tasks.
JavaScript
476
star
16

grunt-contrib-htmlmin

Minify HTML.
JavaScript
427
star
17

grunt-contrib-jasmine

Run jasmine specs headlessly through Headless Chrome
JavaScript
356
star
18

grunt-contrib-compress

Compress files and folders.
JavaScript
346
star
19

grunt-contrib-coffee

Compile CoffeeScript files to JavaScript.
JavaScript
330
star
20

grunt-contrib-pug

Compile Pug templates.
JavaScript
329
star
21

grunt-contrib-handlebars

Precompile Handlebars templates to JST file.
JavaScript
282
star
22

grunt-contrib-csslint

Lint CSS files.
JavaScript
242
star
23

grunt-contrib-qunit

Run QUnit tests in Headless Chrome.
JavaScript
215
star
24

grunt-contrib-livereload

Reload assets live in the browser.
JavaScript
203
star
25

grunt-init

Generate project scaffolding from a template.
JavaScript
191
star
26

grunt-contrib-stylus

Compile Stylus files to CSS.
JavaScript
175
star
27

grunt-init-gruntfile

Create a basic Gruntfile with grunt-init.
JavaScript
156
star
28

gruntjs.com

Grunt's Website
Less
156
star
29

grunt-contrib-jst

Compile underscore templates to JST file.
JavaScript
113
star
30

grunt-lib-phantomjs

Grunt and PhantomJS, sitting in a tree.
JavaScript
94
star
31

grunt-next

Grunt v1.0 alpha
JavaScript
84
star
32

grunt-docs

Grunt documentation.
80
star
33

grunt-init-gruntplugin

Create a gruntplugin module with grunt-init, including Nodeunit unit tests.
JavaScript
79
star
34

grunt-contrib-yuidoc

Compile YUIDoc Documentation.
JavaScript
76
star
35

grunt-contrib-nodeunit

Run Nodeunit unit tests.
JavaScript
69
star
36

grunt-contrib-symlink

Create symbolic links.
JavaScript
58
star
37

grunt-init-jquery

Create a jQuery plugin with grunt-init, including QUnit unit tests.
JavaScript
58
star
38

grunt-init-node

Create a Node.js module with grunt-init, including Nodeunit unit tests.
JavaScript
54
star
39

grunt-contrib-bump

A work-in-progress Grunt plugin for bumping a version number in JSON files.
JavaScript
52
star
40

grunt-init-commonjs

Create a commonjs module with grunt-init, including Nodeunit unit tests.
JavaScript
17
star
41

grunt-contrib-internal

Internal tasks for managing the grunt-contrib project.
JavaScript
16
star
42

grunt-init-gruntfile-sample

This is sample output generated by the grunt-init "gruntfile" template.
JavaScript
14
star
43

grunt-init-jquery-sample

This is sample output generated by the grunt-init "jquery" template.
JavaScript
12
star
44

grunt-lib-contrib

Common functionality shared across grunt-contrib tasks.
JavaScript
12
star
45

example-subgrunt

Run a Gruntfile in multiple subdirectories.
JavaScript
11
star
46

grunt-contrib-mincss

Renamed to grunt-contrib-cssmin.
9
star
47

grunt-init-gruntplugin-sample

This is sample output generated by the grunt-init "gruntplugin" template.
JavaScript
9
star
48

grunt-init-node-sample

This is sample output generated by the grunt-init "node" template.
JavaScript
8
star
49

grunt-known-options

The known options used in Grunt
JavaScript
7
star
50

grunt-init-commonjs-sample

This is sample output generated by the grunt-init "commonjs" template.
JavaScript
7
star
51

clone-repos

Quickly clone all gruntjs repos (for grunt development)
Ruby
6
star
52

grunt-lib-legacyhelpers

Some old grunt helpers provided for backwards compatability.
JavaScript
6
star
53

grunt-legacy-util

deprecated utility methods
JavaScript
5
star
54

grunt-legacy-log

The Grunt logger.
JavaScript
5
star
55

rfcs

RFCs for changes to Grunt
4
star
56

grunt-legacy-log-utils

Static methods for the Grunt 0.4.x logger.
JavaScript
4
star
57

grunt-plugin-list

[Deprecated] Generates a list of all grunt plugins as json
JavaScript
4
star
58

grunt-legacy-event-logger

Event logger for Grunt legacy libs.
JavaScript
3
star
59

grunt-legacy-config

Grunt's config methods, as a standalone library.
JavaScript
2
star
60

grunt-legacy-task

Grunt's task methods, as a standalone library.
JavaScript
1
star
61

grunt-legacy-option

Grunt's option methods, as a standalone library.
JavaScript
1
star
62

grunt-legacy-cli

Grunt's CLI methods, as a standalone library.
JavaScript
1
star