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 深入剖析

204

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

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

    ×