4. Link both files with the main HTML doc
<link rel="stylesheet/less" href="styles.less" />
<script src="less.js" ></script>
5. Server-side way
First possibility Second possibility
Download NPM Download Ruby
http://www.ruby-lang.org/en/downloads
https://github.com/isaacs/npm
Or get Node.js For Windows users
http://nodejs.org/ http://rubyinstaller.org
Now start the command prompt
8. 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 Output Css file
Less file
9. LESS Compilers
Remember the client-side way, well this is pretty
much the same, but we have tools to help us.
simpLess CodeKit LiveReload
15. Sometimes we repeat the same value
over and over
#firstElement {
background: #abcdef
}
#secondElement { background: #abcdef
background : #abcdef
}
#thirdElement {
color : #ff91aa;
}
... color : #ff91aa
#nthElement {
color : #ff91aa;
}
18. 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*/
}
21. If we have a lot of nested content is tedious to
have address the deepest elements
<div id=“main”> #main {
<p> width:500px
<span>Span text</span> }
<a href=“#”>Link</a> #main p {
</p> width: 150px;
</div> }
#main p span {
color: #abcdef;
}
#main p a {
text-decoration: none;
}
22. LESS and SaSS
#main{
width: 500px; FIRST LEVEL NESTING (P ELEMENT)
p{
width: 150px;
SECOND LEVEL NESTING
Span element
span {
color: #abcdef;
}
a{ SECOND LEVEL NESTING
anchor element
text-decoration: none;
}
}
}
24. Operations
LESS example Sass example
// width variable // width variable
@width: 500px; $width : 500px;
#divNewWidth { #divNewWidth {
width: (@width + 10) width: ($width + 10);
} }
Both Sass and Less supports math operators(+|-|*|/|%).
25. Functions
Both Sass and Less supports a variety of Math
and Color functions, that generated specific css
values
Sass functions:
http://sasslang.com/docs/yardoc/Sass/Script/Functions.html
Less functions:
http://lesscss.org/#-color-functions