css less 深入剖析

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

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:

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 iscoloro isnumbero isstringo iskeywordo 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 ispixelo ispercentageo isemo 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 )