2. Agenda
• What is LESS ?
• LESS features
• LESS Advantages
• How to use LESS ?
• References
• Demo
225-May-2013
3. What is LESS ?
• Dynamic Style sheet language designed
by Alexis Sellier
• The CSS pre-processors
• Leaner/Meaner CSS
• Valid CSS is valid LESS
25-May-2013 3
5. • Less variable defined with at sign (@)
Less CSS
25-May-2013 5
Variable
6. Operations
• Less allows addition, subtraction, division
and multiplication of property values and
colors
Less CSS
25-May-2013 6
7. Function (build-in)
• Functions map one-to-one with JavaScript
code, allowing manipulation of values. It
could be Math functions, color function,
…
Less CSS
25-May-2013 7
9. Mixins
• Mixins allow embedding all the properties
of a class into another class by including
the class name as one of its properties,
thus behaving as a sort of constant or
variable. They can also behave like
functions, and take arguments.
25-May-2013 9
14. Variable scope
• The scope is
inside the curly
bracket ({ }),
otherwise you
have to declare
as global
25-May-2013 14
Error
15. LESS Advantages
• Increase readability and organization of
CSS using:
Imports
Nested rules
Comments
/* comment here */
// quick comment
25-May-2013 15
16. LESS Advantages
• Decrease how much CSS you have to
write using:
Variable
Function and Operations
Mixins
Expression statement
Namespace
25-May-2013 16
19. Client side
• Include your less file (*.less) in <head> tag
• Download less.js from http://lesscss.org
• Include less.js after your less file <head>
Make sure you include style sheets before the script
25-May-2013 19
20. Server side
• Installation (Unix/Linux OS)
$ npm install –g less
• Command line
Compile less as plain CSS
$ lessc style.less > style.css
This command will output the simple plain CSS
25-May-2013 20
21. Server side
• You might want minified CSS output
Simple minified CSS
$ lessc –x style.less > style.css
Most minified CSS
$ lessc –yui-compress style.less > style.css
For more command option you can run
$ lessc or
$ lessc --help
25-May-2013 21
22. Less compiler on Windows or
Mac
• Cygwin (http://cygwin.com)
• SimpLESS (http://wearekiss.com/simpless)
• Koala (http://koala-app.com)
• WinLESS (http://winless.org)
• …
25-May-2013 22
