less & sass

LESS & Sass Overview

How to START with

Client-side way

Download less.js

http://lesscss.org/

Create style.less file

Instead of style.css

<link rel="stylesheet/less" href="styles.less" />

<script src="less.js" ></script>

Link both files with the main HTML doc

Server-side way

First possibility

Download NPM https://github.com/isaacs/npm

Or get Node.js

http://nodejs.org/

Second possibility

Download Ruby http://www.ruby-lang.org/en/downloads

For Windows users

http://rubyinstaller.org

Now start the command prompt

$ npm install -g less

If you chose NPM type:

$ gem install less

If you chose Ruby type:

How to compile the Less code?

Client-side way It happens automatically when you hit (F5).

You could also use some compilation tools.

Server-side way $ lessc style.less > style.css

Less compiler

Less file

Output Css file

LESS Compilers

Remember the client-side way, well this is pretty much the same, but we have tools to help us.

simpLess LiveReload CodeKit

How to START with

Just Server-side way (there are dome unofficial client side ways)

$ gem install sass

How to compile the Sass code?

Server-side way $ sass --watch style.scss : style.css

Sass compiler

Watch for compilation

CSS code file SASS code file

Less & Sass comparison

Variables just a value container

Sometimes we repeat the same value over and over

#firstElement {

background: #abcdef

}

#secondElement {

background : #abcdef

}

#thirdElement {

color : #ff91aa;

}

...

#nthElement {

color : #ff91aa;

}

color : #ff91aa

background: #abcdef

LESS

@bgColor : #abcdef;

@justColor : #ff91aa;

#firstElement{

background: @bgColor;

}

$bgColor : #abcdef;

$justColor : #ff91aa;

#firstElement{

background: $bgColor;

}

SASS

Mixins variables on steroids

Sometimes we repeat a big chinks of code with different values over and over

#justElement {

-moz-bordee-radius: 10px;

-webkit-border-radius: 10px;

-o-border-radius: 10px;

border-radius: 10px;

}

#anotherElement {

/* if we want the same*/

}

LESS

.roundBorder( @val : 10px ) {

-moz-bordee-radius: @val;

-webkit-border-radius: @val;

-o-border-radius: @val;

border-radius: @val;

}

#justElement{

.roundBorder( );

}

#anatherElement{

.roundBorder(17px);

}

@roundBorder( $val : 10x) {

-moz-bordee-radius: $val;

-webkit-border-radius: $val;

-o-border-radius: $val;

border-radius: $val;

}

#justElement{

@include roundBorder()

}

#anotherElement{

@include roundBorder(17px)

}

SASS

Nested css code no more epic repetition code

If we have a lot of nested content is tedious to have address the deepest elements

<div id=“main”>

<p>

<span>Span text</span>

<a href=“#”>Link</a>

</p>

</div>

#main {

width:500px

}

#main p {

width: 150px;

}

#main p span {

color: #abcdef;

}

#main p a {

text-decoration: none;

}

LESS and SaSS

#main{

width: 500px;

p {

width: 150px;

span {

color: #abcdef;

}

a {

text-decoration: none;

}

}

}

FIRST LEVEL NESTING (P ELEMENT)

SECOND LEVEL NESTING Span element

SECOND LEVEL NESTING anchor element

Functions & Operations a way to do the math

Operations

LESS example // width variable

@width: 500px;

#divNewWidth {

width: (@width + 10)

}

Sass example

// width variable

$width : 500px;

#divNewWidth {

width: ($width + 10);

}

Both Sass and Less supports math operators(+|-|*|/|%).

Functions

Sass functions:

http://sasslang.com/docs/yardoc/Sass/Script/Functions.html

Less functions: http://lesscss.org/#-color-functions

Both Sass and Less supports a variety of Math and Color functions, that generated specific css values