less & sass
DESCRIPTION
Basic overview of tho popular css preprocesorsTRANSCRIPT
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