Shifting from CSS to Sass.

1. Introducing
Sass, Grunt, Node modules
Priyanka Sethi

2. 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.

3. 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.

4. 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

5. 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;
}

6. 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); }

7. Extend/Inheritence
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}

8. Nesting
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
}

9. 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.

10. 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.

11. Sample Gruntfile.js
http://gruntjs.com/sample-gruntfile
Plugins
http://gruntjs.com/plugins

12. grunt-contrib-uglify
Minify javascript files with UglifyJS
Run this task with the grunt uglify command.
https://www.npmjs.com/package/grunt-contrib-uglify

13. grunt-contrib-sass
Compile Sass to CSS
Run this task with the grunt sass command
https://www.npmjs.com/package/grunt-contrib-sass

14. grunt-contrib-cssmin
Minify CSS
Run this task with the grunt cssmin command.
https://www.npmjs.com/package/grunt-contrib-cssmin

15. 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

16. 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.

17. Installing modules using npm
npm 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.

18. 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.