Less中文网 教程 概览部分

原文链接：http://lesscss.cn/features/#features-overview-feature

Overview概览

As an extension to CSS, Less is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.

作为CSS的扩展，Less不仅后向兼容CSS，更具有基于现有CSS语法的新特性。这使得学习Less轻而易举，若仍为疑虑，可依然使用普通的CSS。

Variables变量

These are pretty self-explanatory:

通过变量可以实现漂亮的自我注释：

@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header {  color: @light-blue;}

Outputs:

输出：

#header {  color: #6c94be;}

Note that variables are actually "constants" in that they can only be defined once.

注意：实际上变量是“常量”，因为变量的值只可以定义一次。

Mixins混合代码块

Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set. So say we have the following class:

混合代码块，可以将一个CSS样式对，轻松的置于另外的CSS样式对中。比如我们有以下的CSS样式对：

.bordered {  border-top: dotted 1px black;  border-bottom: solid 2px black;}

And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:

若想将以上CSS样式对置入其它的CSS样式对中，只需直接输入CSS样式对的名称即可：

#menu a {  color: #111;  .bordered;/*将此bordered样式集合，嵌入#menu a中 */}.post a {  color: red;  .bordered;
/*将此bordered样式集合，嵌入#post a中 */
}

The properties of the .bordered class will now appear in both #menu a and .post a. (Note that you can also use #ids as mixins.)

Learn more

• More about mixins
• Parametric Mixins

Nested Rules 嵌套的规则集合

Less gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:

Lsee提供了嵌套的方式，可用以取代CSS的级联规则。如下的普通的CSS级联样式：

#header {  color: black;}#header .navigation {/* 级联样式 */  font-size: 12px;}#header .logo {  width: 300px;}

In Less, we can also write it this way:

在Less中，可以采用嵌套，如下：

#header {  color: black;  .navigation {
/* 嵌套样式 */
    font-size: 12px;  }
 .logo {    
     width: 300px;  }
}

The resulting code is more concise, and mimics the structure of your HTML.

如此书写显得更简洁，也模拟了HTML的结构。

You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (& represents the current selector parent):

也可采用此方式将伪选择器与混合一起使用。& 表示当前选择器的父选择器。

.clearfix {  display: block;  zoom: 1;  &:after {    content: " ";    display: block;    font-size: 0;    height: 0;    clear: both;    visibility: hidden;  }}

See also

• Parent Selectors

Nested Directives and Bubbling嵌套指令、冒泡

Directives such as media or keyframe can be nested in the same way as selectors. Directive is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling.

media、keyframe等指令，也可作为选择器的形式进行嵌套。在最终转化成CSS时，这此指令会提升到顶部，而其它规则的相对顺序是不会改变，这种特性叫做冒泡。

Conditional directives e.g. @Media, @supports and @document have also selectors copied into their bodies:

.screen-color {  @media screen {    color: green;    @media (min-width: 768px) {      color: red;    }  }  @media tv {    color: black;  }}

outputs:输出：

@media screen {  .screen-color {    color: green;  }}@media screen and (min-width: 768px) {  .screen-color {    color: red;  }}@media tv {  .screen-color {    color: black;  }}

Remaining non-conditional directives, for example font-face or keyframes, are bubbled up too. Their bodies do not change:

#a {  color: blue;  @font-face {    src: made-up-url;  }  padding: 2 2 2 2;}

outputs:

#a {  color: blue;}@font-face {  src: made-up-url;}#a {  padding: 2 2 2 2;}

Operations操作符

Arithmetical operations +, -, *, / can operate on any number, color or variable. If it is possible, mathematical operations take units into account and convert numbers before adding, subtracting or comparing them. The result has leftmost explicitly stated unit type. If the conversion is impossible or not meaningful, units are ignored. Example of impossible conversion: px to cm or rad to %.

数字运算符+-*/可用于任意数字、颜色、变量。在加、减、比较运算前，会尽可能的考虑单位并转换数值。左边起第一个明确的单位为基准转换单位。此后的单位转换若是无意义的，则忽略单位。

// numbers are converted into the same units@conversion-1: 5cm + 10mm; // result is 6cm@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm// conversion is impossible@incompatible-units: 2 + 5px - 3cm; // result is 4px// example with variables@base: 5%;@filler: @base * 2; // result is 10%@other: @base + @filler; // result is 15%

Multiplication and division do not convert numbers. It would not be meaningful in most cases - a length multiplied by a length gives an area and css does not support specifying areas. Less will operate on numbers as they are and assign explicitly stated unit type to the result.

乘、除运算时，并不会依单位转换数值，因为此类运算大都是无意义的。以左边起始的第一个单位为准，后面的单位直接忽略。

@base: 2cm * 3mm; // result is 6cm

Colors are split into their red, green, blue and alpha dimensions. The operation is applied to each color dimension separately. E.g., if the user added two colors, then the green dimension of the result is equal to sum of green dimensions of input colors. If the user multiplied a color by a number, each color dimension will get multiplied.

Note: arithmetic operation on alpha is not defined, because math operation on colors do not have standard agreed upon meaning. Do not rely on current implemention as itmay change in later versions.

An operation on colors always produces valid color. If some color dimension of the result ends up being bigger thanff or smaller than00, the dimension is rounded to eitherff or00. If alpha ends up being bigger than1.0 or smaller than0.0, the alpha is rounded to either1.0 or0.0.

@color: #224488 / 2; //results in #112244background-color: #112244 + #111; // result is #223355

Escaping转义符

Escaping allows you to use any arbitrary string as property or variable value. Anything inside~"anything" or~'anything' is used as is with no changes exceptinterpolation.

若在单引号、双引号前加~，则引号内的特殊字符不必进行转义处理了。

.weird-element {  content: ~"^//* some horrible but needed css hack";}

results in:

.weird-element {  content: ^//* some horrible but needed css hack;}

Functions函数

Less provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.

Less定义了一系列的函数可供使用。

Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:

使用Less提供的函数是非常简单的。如下示例使用percentage函数将0.5转化成50%，提升基准颜色的饱合度5%，

@base: #f04615;@width: 0.5;.class {  width: percentage(@width); // returns `50%`  color: saturate(@base, 5%);  background-color: spin(lighten(@base, 25%), 8);}

Namespaces and Accessors命名空间 、访问符

(Not to be confused with CSS @namespace or namespace selectors).

Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in Less, say you want to bundle some mixins and variables under#bundle, for later reuse or distributing:

注意：不要和CSS@namespace混淆。

此外的命名空间更像一个实例化的对象，可通过访问符 > 引用其内部成员。

#bundle {  .button {    display: block;    border: 1px solid black;    background-color: grey;    &:hover {      background-color: white    }  }  .tab { ... }  .citation { ... }}

Now if we want to mixin the .button class in our #header a, we can do:

#header a {  color: orange;  #bundle > .button;}

Note that variables declared within a namespace will be scoped to that namespace only and will not be available outside of the scope via the same syntax that you would use to reference a mixin (#Namespace > .mixin-name). So, for example, you can't do the following: (#Namespace > @this-will-not-work).

Scope作用域

Scope in Less is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on.

查找 变量、混合块时，先找局部作用域内的，若未能找到，再找父级作用域，依次上找。

@var: red;#page {  @var: white;  #header {    color: @var; // white  }}

Variables and mixins do not have to be declared before being used so the following Less code is identical to the previous example:

变量、混合块 不必先声明后使用。类似于Js语法，后声明的变量 在编译时会被提升到顶部。

@var: red;#page {  #header {    color: @var; // white  }  @var: white;}

See also

• Lazy Loading

Comments注释

Both block-style and inline comments may be used:

块注释(/*  */)、行注释(//    )都可使用。

/* One hell of a blockstyle comment! */@var: red;// Get in line!@var: white;

Importing导入

Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The extension is optionally specified for.less files.

可导入其它的Less文件。导入语法中的.less后缀可有可无。

@import "library"; // library.less@import "typo.css";