SCSS, SASS, Grunt, and Compass Example

11/24/2015 4:13:39 AM
--gruntfile.js
module.exports = function(grunt) {
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		compass: {
			dist: {
				options: {
					sassDir: 'scss',
					cssDir: 'css'
				}
			}
		},
		watch: {
			css: {
				files: '**/*.scss',
				tasks: ['compass']
			}
		}
	});
	grunt.loadNpmTasks('grunt-contrib-compass');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.registerTask('default',['watch']);
}

//package.json
{
  "name": "testing",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-compass": "1.0.4",
	"grunt-contrib-watch": "0.6.1"
  }
}

--themes.scss
@import "compass";

// -----------------------------------------------------------------------------
//! VARIABLES
// -----------------------------------------------------------------------------
	
	// Colors    
	$color_grey_01: #e2e2e2;
// -----------------------------------------------------------------------------
//! INCLUDES
// -----------------------------------------------------------------------------

@import 'extends';

div.something_rounded
{
	@include border-radius(4px, 4px);
	@include background(linear-gradient(top left, #333, #0c0));
}

--_extends.scss
.row_selected
{
	margin: 50px;
}



---install
//update npm
npm install -g npm

//install compass
gem install compass

//install grunt
npm install -g grunt-cli

//update based on package.json
npm install