A Better CSS: LESS and SASS

A Better CSS: LESS and SASS



LESS features in summary:



>> Create variables @variable-name : red;

>> Create heirarchy of elements rather than repeating them many times

>> Add comments // and /**/

>> Import CSS or other Less files @Import "filename.css"

>> Functions

>>> color : darken(@variable-name + 10%) , lighten, saturate, etc

>> Operations

>>> color : @font-size + 12;

>> Mixen -> functions that accepts parameter and is reusable

>>> .my-first-mixin(@size){

border-radius : @size;

}



and use it as:

#form {

broder-radius : my-first-mixin(5px);

}



>> namespaces