• Like
Css less 深入剖析
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Css less 深入剖析



Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    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;}


  • 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 )