Compile Sass to CSS
npm install grunt-contrib-sass> Compile Sass to CSS
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:
``shell`
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:
`js`
grunt.loadNpmTasks('grunt-contrib-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.
$3
#### sourcemap
Type:
String
Default: autoValues:
-
auto - relative paths where possible, file URIs elsewhere
- file - always absolute file URIs
- inline - include the source text in the sourcemap
- none- no sourcemapsRequires Sass 3.4.0, which can be installed with
gem install sass
#### trace
Type:
Boolean
Default: falseShow a full traceback on error.
#### unixNewlines
Type:
Boolean
Default: false on Windows, otherwise trueForce Unix newlines in written files.
#### check
Type:
Boolean
Default: falseJust check the Sass syntax, does not evaluate and write the output.
#### style
Type:
String
Default: nestedOutput style. Can be
nested, compact, compressed, expanded.
#### precision
Type:
Number
Default: 5How many digits of precision to use when outputting decimal numbers.
#### quiet
Type:
Boolean
Default: falseSilence warnings and status messages during compilation.
#### compass
Type:
Boolean
Default: falseMake Compass imports available and load project configuration (
config.rb located close to the Gruntfile.js).
#### debugInfo
Type:
Boolean
Default: falseEmit extra information in the generated CSS that can be used by the FireSass Firebug plugin.
#### lineNumbers
Type:
Boolean
Default: falseEmit comments in the generated CSS indicating the corresponding source line.
#### loadPath
Type:
String|ArrayAdd a (or multiple) Sass import path.
#### require
Type:
String|ArrayRequire a (or multiple) Ruby library before running Sass.
#### cacheLocation
Type:
String
Default: .sass-cacheThe path to put cached Sass files.
#### noCache
Type:
Boolean
Default: falseDon't cache to sassc files.
#### bundleExec
Type:
Boolean
Default: falseRun
sass with bundle exec: bundle exec sass.
#### update
Type:
Boolean
Default: falseOnly compile changed files.
$3
#### Example config
`js
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
`js
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.`js
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.`js
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.---
Task submitted by Sindre Sorhus
This file was generated on Thu Aug 20 2020 12:31:17.