3. less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and functions.!
LESS runs on both the server-side (with Node.js and
Rhino) or client-side (modern browsers only).
4. less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and functions.!
LESS runs on both the server-side (with Node.js and
Rhino) or client-side (modern browsers only).
5. less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and functions.!
LESS runs on both the server-side (with Node.js and
Rhino) or client-side (modern browsers only).
6. less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and functions.!
LESS runs on both the server-side (with Node.js and
Rhino) or client-side (modern browsers only).
7. less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and functions.!
LESS runs on both the server-side (with Node.js and
Rhino) or client-side (modern browsers only).
8. less?
The dynamic stylesheet language. !
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and functions.!
LESS runs on both the server-side (with Node.js and
Rhino) or client-side (modern browsers only).
9. Variables
•
specify values in a single place, and then re-use
them through the stylesheet.!
•
http://jsbin.com/AYOHIxE/5/edit
10. Scope
•
When defining a variable twice, the last definition of
the variable is used, searching from the current
scope upwards.!
•
http://jsbin.com/AwUhUviw/2/edit
11. Comments
•
Single-line comments are also valid in LESS, but
they are ‘silent’, they don’t show up in the compiled
CSS output!
•
http://jsbin.com/EBomeHoW/1/edit
12. Mixins
•
embed all the properties of a class into another
class.!
•
http://jsbin.com/uDUWEKo/3/edit
13. Parametric Mixins
•
LESS has a special type of ruleset which can be
mixed in like classes, but accepts parameters.!
•
http://jsbin.com/uDUWEKo/1/edit
14. !important
•
Use the !important keyword after mixin call to mark
all properties brought by it as !important!
•
http://jsbin.com/idALUbE/1/edit
15. Nested Rules
•
nest selectors inside other selectors. This makes
inheritance clear and style sheets shorter.!
•
http://jsbin.com/iKUsiNI/4/edit
18. & combinator
•
it’s used when you want a nested selector to be
concatenated to its parent selector, instead of acting
as a descendant. This is especially important for
pseudo-classes like :hover and :focus.!
•
http://jsbin.com/iKUsiNI/3/edit
19. Nested Media Queries
•
Media queries can be nested in the same way as
selectors e.g.!
•
http://jsbin.com/eMAQOmOC/2/edit
20. Operations
•
Operations let you add, subtract, divide and multiply
property values and colors.!
•
http://jsbin.com/IVABOGO/2/edit
21. Functions
•
LESS provides a variety of functions which
transform colors, manipulate strings and do maths.!
•
Color: http://jsbin.com/eBipaMUB/1/edit!
•
Math: http://jsbin.com/enIsiZig/1/edit
22. Importing
•
You can import both CSS and LESS files. Only
LESS files import statements are processed, CSS
file import statements are kept as they are.
25. vs Sass
•
Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
static rules.[5]!
•
LESS is inspired by Sass.[6] Sass was designed to both
simplify and extend CSS, so things like curly braces were
removed from the syntax. LESS was designed to be as
close to CSS as possible, so the syntax is identical to
existing CSS code. As a result, existing CSS can be used
as valid LESS code.!
•
The newer versions of Sass also introduced a CSS-like
syntax called SCSS (Sassy CSS).[2]
26. vs Sass
•
Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
static rules.[5]!
•
LESS is inspired by Sass.[6] Sass was designed to both
simplify and extend CSS, so things like curly braces were
removed from the syntax. LESS was designed to be as
close to CSS as possible, so the syntax is identical to
existing CSS code. As a result, existing CSS can be used
as valid LESS code.!
•
The newer versions of Sass also introduced a CSS-like
syntax called SCSS (Sassy CSS).[2]
27. vs Sass
•
Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
static rules.[5]!
•
LESS is inspired by Sass.[6] Sass was designed to both
simplify and extend CSS, so things like curly braces were
removed from the syntax. LESS was designed to be as
close to CSS as possible, so the syntax is identical to
existing CSS code. As a result, existing CSS can be used
as valid LESS code.!
•
The newer versions of Sass also introduced a CSS-like
syntax called SCSS (Sassy CSS).[2]
28.
29. vs Sass
•
Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
static rules.[5]!
•
LESS is inspired by Sass.[6] Sass was designed to both
simplify and extend CSS, so things like curly braces were
removed from the syntax. LESS was designed to be as
close to CSS as possible, so the syntax is identical to
existing CSS code. As a result, existing CSS can be used
as valid LESS code.!
•
The newer versions of Sass also introduced a CSS-like
syntax called SCSS (Sassy CSS).[2]
30. vs Sass
•
Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
static rules.[5]!
•
LESS is inspired by Sass.[6] Sass was designed to both
simplify and extend CSS, so things like curly braces were
removed from the syntax. LESS was designed to be as
close to CSS as possible, so the syntax is identical to
existing CSS code. As a result, existing CSS can be used
as valid LESS code.!
•
The newer versions of Sass also introduced a CSS-like
syntax called SCSS (Sassy CSS).[2]
33. vs Sass
•
Both Sass and LESS are CSS preprocessors, which allow
writing clean CSS in a programming construct instead of
static rules.[5]!
•
LESS is inspired by Sass.[6] Sass was designed to both
simplify and extend CSS, so things like curly braces were
removed from the syntax. LESS was designed to be as
close to CSS as possible, so the syntax is identical to
existing CSS code. As a result, existing CSS can be used
as valid LESS code.!
•
The newer versions of Sass also introduced a CSS-like
syntax called SCSS (Sassy CSS).[2]
