Your SlideShare is downloading. ×
0
CSS LESS 深入剖析
Howard 2014/01/27
Guildline
•
•
•
•
•
•
•
•
•
•

Variables
Mixins
Nested Media Queries ( 略 )
Advanced Usage of & ( 略 )
Scope ( 略 )
Extend
Na...
Variables
Mixins
•

In LESS, it is possible to include a bunch of
properties from one ruleset into another ruleset. So
say we have t...
Mixins
• "mix-in" properties from existing styles
• You can mix-in class selectors and id selectors, e.g.
Mixins
• When you call the mixin, the parenthesis are
optional.
Not outputting the mixin
• If you want to create a mixin but you do not want
that mixin to be output, you can put parenthe...
Selectors in mixins
•

Mixins can contain more than just properties, they
can contain selectors to.
Mixins With Multiple Parameters
• Parameters are either semicolon or comma
separated. It is recommended to use semicolon.
...
Mixins With Multiple Parameters
• two arguments and each contains comma
separated list
Mixins With Multiple Parameters
•

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

use dummy semicolon to create mixin call with one
argument containing comma separated c...
Mixins With Multiple Parameters
• comma separated default value: .name(@param1:
red, blue;).
Mixins With Multiple Parameters
• It is legal to define multiple mixins with the same
name and number of parameters. Less ...
The Keyword !important
• Use the !important keyword after mixin call to mark
all properties brought by it as !important:
Mixin Guards
• Guards are useful when you want to match on
expressions, as opposed to simple values or arity.
• The full l...
Mixin Guards
• Guards can be separated with a comma ‘,’–if any
of the guards evaluates to true, it’s considered as a
match...
Mixin Guards
• Here are the basic type checking functions:
o
o
o
o
o

iscolor
isnumber
isstring
iskeyword
Isurl

• If you ...
Mixin Guards
•
略
• Nested Queries
• Advanced Usage of &
• Scope
Extend
• As of version 1.4, LESS supports extending a style.
• it adds the extending selector to the selector list for
out...
Namespaces
• If you want to mixin properties inside a more
complicated selector, you can stack up multiple id's
or classes...
Namespaces
•
String interpolation
• Variables can be embedded inside strings in a
similar way to Ruby or PHP, with the @{name}
construc...
Selector Interpolation
• If you want to use LESS variables inside selectors,
you can do this by referencing the variable u...
References
• http://www.lesscss.org/
• http://lesscss.org/features.html#extend ( lost )
Upcoming SlideShare
Loading in...5
×

Css less 深入剖析

217

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
217
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • .name(@arg1, @arg2) { border:@arg1 @arg2;}div{ .name(1, 2, 3; something, else);}
  • .name(@arg1, @arg2) { border:@arg1 @arg2;}div{ .name(1, 2);}
  • .mixin (@a: 0) { border: @a; boxer: @a;}.unimportant { .mixin(1); }.important { .mixin(2) !important; }
  • .mixin (@a) when (lightness(@a) >= 50%) { background-color: black;}.mixin (@a) when (lightness(@a) < 50%) { background-color: white;}.mixin (@a) { color: @a;}.class1 { .mixin(#ddd) }.class2 { .mixin(#555) }
  • #outer { .inner {color: red; }}.c { #outer > .inner;}
  • @base-url: "http://abc.com";div{ background-image: url("@{base-url}/bg.png");}
  • @name: blocked;.@{name} { color: black;}
  • Transcript of "Css less 深入剖析"

    1. 1. CSS LESS 深入剖析 Howard 2014/01/27
    2. 2. Guildline • • • • • • • • • • Variables Mixins Nested Media Queries ( 略 ) Advanced Usage of & ( 略 ) Scope ( 略 ) Extend Namespaces Parametric Mixins String interpolation Selector Interpolation
    3. 3. Variables
    4. 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. 5. Mixins • "mix-in" properties from existing styles • You can mix-in class selectors and id selectors, e.g.
    6. 6. Mixins • When you call the mixin, the parenthesis are optional.
    7. 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. 8. Selectors in mixins • Mixins can contain more than just properties, they can contain selectors to.
    9. 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. 10. Mixins With Multiple Parameters • two arguments and each contains comma separated list
    11. 11. Mixins With Multiple Parameters • three arguments and each contains one number
    12. 12. Mixins With Multiple Parameters • use dummy semicolon to create mixin call with one argument containing comma separated css list
    13. 13. Mixins With Multiple Parameters • comma separated default value: .name(@param1: red, blue;).
    14. 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. 15. The Keyword !important • Use the !important keyword after mixin call to mark all properties brought by it as !important:
    16. 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. 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. 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. 19. Mixin Guards •
    20. 20. 略 • Nested Queries • Advanced Usage of & • Scope
    21. 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. 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. 23. Namespaces •
    24. 24. String interpolation • Variables can be embedded inside strings in a similar way to Ruby or PHP, with the @{name} construct:
    25. 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. 26. References • http://www.lesscss.org/ • http://lesscss.org/features.html#extend ( lost )
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×