Easy and fast CSS preprocessor
npm install grunt-cssondiet> Grunt plugin which compiles CSS-On-Diet files to CSS.
This plugin can be installed in your project directory by this command:
``shell`
npm install grunt-cssondiet --save-dev
But it requires CSS-On-Diet preprocessor, which can be installed
like this:
`shell`
pip install CSSOnDiet
On some system that command (pip) will not be present. It should be installed with not too old
Python version. But if you have old version install it from
here.
If you are new to Grunt check out Introduction
page
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
`js`
grunt.loadNpmTasks('grunt-cssondiet');
CSS-On-Diet is a preprocessor for CSS files. The key feature is mnemonics for frequently used properties, which are similar to Emmet abbreviations. Other goodies include intuitive media breakpoints, nested and single line comments, variables and mixins, a calculator, hexadecimal RGBA, minifier, ...
This task requires you to have Python
and CSS-On-Diet installed. If you're on OS X or Linux you probably
already have Python installed; test with python -V in your terminal. When you've confirmed you havepip install CSSOnDiet
Python installed, run to install CSS-On-Diet.pip
Maybe you will need to install command before.
`javascript
module.exports = function(grunt) {
grunt.initConfig({
cssondiet: { // Task
dist: { // Target
options: { // Target options
minifyCss: true
},
files: { // Dictionary of files
'main.css': 'main.cod', // 'destination': 'source'
'widgets.css': 'widgets.cod'
}
}
}
});
grunt.loadNpmTasks('grunt-cssondiet');
grunt.registerTask('default', ['cssondiet']);
};
`
CSS-On-Diet concatenates all source files, like they were included in some root-meta file
`javascript
grunt.initConfig({
cssondiet: {
dist: {
files: {
'main.css': [ 'main.cod', 'side.cod' ]
}
}
}
});
`
Type: Boolean false
Default:
Minifies final CSS file.
Type: Array of Strings
Additional directories paths to look for imported files (@cod-include rule).
Type: Boolean false
Default:
Extract comments from final CSS. Always enabled for minify-css option.
Type: Boolean false
Default:
Don't add header line (banner) at the beginning of the CSS. Always enabled for minify-css` option.