1. CSS LESS 深入剖析
Howard 2014/01/27

2. Guildline
•
•
•
•
•
•
•
•
•
•
Variables
Mixins
Nested Media Queries ( 略 )
Advanced Usage of & ( 略 )
Scope ( 略 )
Extend
Namespaces
Parametric Mixins
String interpolation
Selector Interpolation

3. Variables

4. Mixins
•
In LESS, it is possible to include a bunch of
properties from one ruleset into another ruleset. So
say we have the following class:

5. Mixins
• "mix-in" properties from existing styles
• You can mix-in class selectors and id selectors, e.g.

6. Mixins
• When you call the mixin, the parenthesis are
optional.

7. Not outputting the mixin
• If you want to create a mixin but you do not want
that mixin to be output, you can put parenthesis
around it.

8. Selectors in mixins
•
Mixins can contain more than just properties, they
can contain selectors to.

9. Mixins With Multiple Parameters
• Parameters are either semicolon or comma
separated. It is recommended to use semicolon.
• The symbol comma has double meaning:
o It can be interpreted either as a mixin parameters
separator
o As css list separator.

10. Mixins With Multiple Parameters
• two arguments and each contains comma
separated list

11. Mixins With Multiple Parameters
•
three arguments and each contains one number

12. Mixins With Multiple Parameters
•
use dummy semicolon to create mixin call with one
argument containing comma separated css list

13. Mixins With Multiple Parameters
• comma separated default value: .name(@param1:
red, blue;).

14. Mixins With Multiple Parameters
• It is legal to define multiple mixins with the same
name and number of parameters. Less will use
properties of all that can apply.

15. The Keyword !important
• Use the !important keyword after mixin call to mark
all properties brought by it as !important:

16. Mixin Guards
• Guards are useful when you want to match on
expressions, as opposed to simple values or arity.
• The full list of comparison operators usable in guards
are: > >= = =< <

17. Mixin Guards
• Guards can be separated with a comma ‘,’–if any
of the guards evaluates to true, it’s considered as a
match:
• if you want to match mixins based on value type,
you can use the is* functions:

18. Mixin Guards
• Here are the basic type checking functions:
o
o
o
o
o
iscolor
isnumber
isstring
iskeyword
Isurl
• If you want to check if a value, in addition to being
a number, is in a specific unit, you may use one of:
o
o
o
o
ispixel
ispercentage
isem
isunit

19. Mixin Guards
•

20. 略
• Nested Queries
• Advanced Usage of &
• Scope

21. Extend
• As of version 1.4, LESS supports extending a style.
• it adds the extending selector to the selector list for
output of the extended class.
• The syntax for extend is designed to mimic the
syntax of CSS pseudo-classes, and can be
combined with pseudo-classes as long as any
extends selectors come last.

22. Namespaces
• If you want to mixin properties inside a more
complicated selector, you can stack up multiple id's
or classes.
• again the > is optional

23. Namespaces
•

24. String interpolation
• Variables can be embedded inside strings in a
similar way to Ruby or PHP, with the @{name}
construct:

25. Selector Interpolation
• If you want to use LESS variables inside selectors,
you can do this by referencing the variable using
@{selector} as in string interpolation. For example:

26. References
• http://www.lesscss.org/
• http://lesscss.org/features.html#extend ( lost )