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

Css less 深入剖析






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • .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;}

Css less 深入剖析 Css less 深入剖析 Presentation Transcript

  • CSS LESS 深入剖析 Howard 2014/01/27
  • Guildline • • • • • • • • • • Variables Mixins Nested Media Queries ( 略 ) Advanced Usage of & ( 略 ) Scope ( 略 ) Extend Namespaces Parametric Mixins String interpolation Selector Interpolation
  • Variables View slide
  • 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: View slide
  • 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 parenthesis around it.
  • 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. • The symbol comma has double meaning: o It can be interpreted either as a mixin parameters separator o As css list separator.
  • 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 css list
  • 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 will use properties of all that can apply.
  • 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 list of comparison operators usable in guards are: > >= = =< <
  • 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:
  • 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
  • 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 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.
  • 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
  • Namespaces •
  • String interpolation • Variables can be embedded inside strings in a similar way to Ruby or PHP, with the @{name} construct:
  • 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:
  • References • http://www.lesscss.org/ • http://lesscss.org/features.html#extend ( lost )