Introducing Sass, Grunt, Node modules

Priyanka Sethi

Sass is Syntactically Awesome Stylesheet.

Sass is an extension of CSS that adds power and elegance to the basic language. - CSS WITH SUPERPOWERS

It allows you to use variables, nested rules, mixins, inline imports and more, all with fully CSS-compatible syntax.

Sass helps keep large style sheets well-organized.

Features

Fully css-compatible.

Language extensions such as variables, nesting and mixins.

Well formatted, customizable output.

Many useful functions for manipulating colors and other values.

Advanced features like control directives for libraries.

Syntax- There are two syntaxes, we will be focussing on SCSS,

Sassy CSS - It is an extension of the syntax of CSS, which means every valid CSS stylesheet is a valid SCSS file with the same meaning.

http://sass-lang.com/guide

CSS Extensions Variables $font-stack: Helvetica, sans-serif;$primary-color: #333;

body { font: 100% $font-stack; color: $primary-color;}

Import

@import 'reset';

body {

font: 100% Helvetica,

sans-serif;

background-color:

#efefef;

}

Mixins

@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

.box { @include border-radius(10px); }

Extend/Inheritence

.message {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

.success {

@extend .message;

border-color: green;

}

.error {

@extend .message;

border-color: red;

}

Nesting ul { margin: 0; padding: 0; list-style: none;

li {

display: inline-block;

a { display: block; padding: 6px 12px; text-decoration: none; } }

}

Ruby- Ruby uses Gems to manage its various packages of code like Sass.

Sass is Ruby gem.

gem install sass

This will install Sass and dependencies.

Grunt - The JavaScript Task Runner.

Which basically means automation, the less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting etc.

After you’ve configured it through a Gruntfile, a task runner can do most of that mundane work with zero effort.

Sample Gruntfile.js

http://gruntjs.com/sample-gruntfile

Plugins

http://gruntjs.com/plugins

grunt-contrib-uglify

Minify javascript files with UglifyJS

Run this task with the grunt uglify command.

https://www.npmjs.com/package/grunt-contrib-uglify

grunt-contrib-sass

Compile Sass to CSS

Run this task with the grunt sass command

https://www.npmjs.com/package/grunt-contrib-sass

grunt-contrib-cssmin

Minify CSS

Run this task with the grunt cssmin command.

https://www.npmjs.com/package/grunt-contrib-cssmin

grunt-contrib-watch

Run predefined tasks whenever watched file patterns are added, changed or deleted.

Run this task with the grunt watch command.

https://www.npmjs.com/package/grunt-contrib-watch

Node.js - npm

npm is Node Package Manager.

Npm provides command line utility to install Node.js packages, do version management and dependency management of Node.js packages.

Installing modules using npmnpm install npm -g

Node comes with npm installed, but npm gets updated more frequently then Node. So just to make sure, you have latest version.

npm install -g grunt-cli

The grunt command line interface. -g is for globally, we will have access to the grunt command anywhere on your system.

Goals for next presentation

1.How to implement all these in a project.2.Explaining grunt, npm and sass with live

example. 3.Code structure for english and arabic, how to

make things more dynamic.