Sass Tutorial

How to install on windows?

  1. Install ruby from http://rubyinstaller.org/.

On installation dialog select “add ruby executables to your path” check box.

 

How to install ruby on windows

 

    2. Install sass through command prompt. In the command prompt type:

 gem install sass

Install sass using gem command

Main Functions in SASS

compile scss to css --update

=> change directory in command prompt to where you have the scss files

then type

=> sass --update nameOftheScssFile.scss

this will save a nameOftheScssFile.css file

if you would like the compiled css to have a different name then type this

=> sass --update nameOftheScssFile.scss:anotherName.css

You can also compile all the files within a directory by typing:

=>sass --update nameOfDirectory

compile scss to css --watch

Watch command as the name suggests watches the directory and updates the files instantly and automatically.

How to get your scss compressed?

In the command prompt type

sass --update nameOftheFile.scss --style compressed

or

sass --watch nameOftheFolder --style compressed

Nested Styles with Saas

example:

&:hover

a{color:blue;

&:hover{color:red}

}

color functions

lighten(color, value in %)

darken(color, value in %)

saturate(color, value in %)

desaturate(color, value in %)

fade(color, value in %)

fadein(color, value in %)

fadeout(color, value in %)

complement(color)

invert(color)


example:

if we set color constant as red

$color:red;

then

complement($baseColor)  will give us cyan.


mathematical functions

round(#)

ceil(#)

floor(#)

abs(#)


example:

if we set a width variable at 10px

$width=10px;

then

$width2=floor(($width+1)/2);

would give us 5px.

@Mixins


Mixin enables the usage of properties multiple times by defining them only once.

Usage:

@mixin .nameOftheProperty{

letter-spacing:1px;

line-height:15px;

}

a{@include nameOftheProperty}

 


Mixin with variables

example:

@mixin titles ($lineHeight:25px, $padding:5px, $color:#333, $background:#999) {

line-height:$lineHeight;

padding:$padding;

color:$color;

background:$background;

}

In the mixin above default values for the variables are set in the parenthesis. And if we would like to use these default values let say for h1 tag;

h1{

@include titles ();

}

If we would like assign different values;

h1{

@include titles (15px, 10px, red, #333);

}

then we have to enter the values within the parenthesis in the respective order as shown above.

Mathematical Operations


Summation

example:

$lineHeight:20px;

header {

line-height:$lineHeight+10;

}

Here you dont need to worry about adding a unit since sass will automatically pick up the unit from the defined constant ($lineHeight).


Division

example:

$lineHeight:20px;

header{

line-height:$lineHeight/2;

}

Multiplication

example:

$lineHeight:20px;

header{

line-height:$lineHeight*2;

}

Conditional Operator

$lineHeight:16px;

$letterSpace:if($lineHeight==16px, 8px,4px)


This sets the $letterSpace constant to 8 px if $lineHeight is 16px. If $lineHeight is not 16px then $letterSpace will be set to 4px.