Your SlideShare is downloading. ×
Css less 深入剖析
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css less 深入剖析


Published on

Published in: Technology, Education
1 Like
  • 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: "";div{ background-image: url("@{base-url}/bg.png");}
  • @name: blocked;.@{name} { color: black;}
  • Transcript

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