|
9 yıl önce | |
---|---|---|
.. | ||
docs | 9 yıl önce | |
node_modules | 9 yıl önce | |
tasks | 9 yıl önce | |
.jshintrc | 9 yıl önce | |
AUTHORS | 9 yıl önce | |
CHANGELOG | 9 yıl önce | |
CONTRIBUTING.md | 9 yıl önce | |
Gruntfile.js | 9 yıl önce | |
LICENSE-MIT | 9 yıl önce | |
README.md | 9 yıl önce | |
package.json | 9 yıl önce |
Compile Sass to CSS
This plugin requires Grunt ~0.4.0
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');
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.
Type: Boolean
Default: false
Enable Source Maps.
Requires Sass 3.3.0, which can be installed with gem install sass --pre
Type: Boolean
Default: false
Show a full traceback on error.
Type: Boolean
Default: false
on Windows, otherwise true
Force Unix newlines in written files.
Type: Boolean
Default: false
Just check syntax, don't evaluate.
Type: String
Default: nested
Output style. Can be nested
, compact
, compressed
, expanded
.
Type: Number
Default: 3
How many digits of precision to use when outputting decimal numbers.
Type: Boolean
Default: false
Silence warnings and status messages during compilation.
Type: Boolean
Default: false
Make Compass imports available and load project configuration (config.rb
located close to the Gruntfile.js
).
Type: Boolean
Default: false
Emit extra information in the generated CSS that can be used by the FireSass Firebug plugin.
Type: Boolean
Default: false
Emit comments in the generated CSS indicating the corresponding source line.
Type: String|Array
Add a (or multiple) Sass import path.
Type: String|Array
Require a (or multiple) Ruby library before running Sass.
Type: String
Default: .sass-cache
The path to put cached Sass files.
Type: Boolean
Default: false
Don't cache to sassc files.
Type: Boolean
Default: false
Run sass
with bundle exec: bundle exec sass
.
Type: String
Prepend the specified string to the output file. Useful for licensing information.
Can't be used if you use the sourcemap
option.
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']);
grunt.initConfig({
sass: {
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});
Instead of concatenating the files, just @import
them into another .sass
file eg. main.scss
.
You can specify multiple destination: source
items in files
.
grunt.initConfig({
sass: {
dist: {
files: {
'main.css': 'main.scss',
'widgets.css': 'widgets.scss'
}
}
}
});
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'
}]
}
}
});
bundle exec
. Make sure .css
files are compiled with SCSS.Task submitted by Sindre Sorhus
This file was generated on Thu Mar 06 2014 14:43:40.