彻底全面理解less（上）

电玩女神 2022-12-29 02:10 166阅读 0赞

看着文档，将less好好梳理一遍。

# 1. less 简介 #

作为CSS的扩展，Less不仅与CSS向后兼容，而且它添加的其他功能都使用现有的CSS语法。这使学习“轻而易举”变得轻而易举，并且如果有疑问，则可以让您回到普通的CSS。

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。*Less* 可以运行在 Node 或浏览器端。Less运行的时候。

Less运行的时候，最终被编译为 CSS。Less扩展的这些特性，让CSS像操作JS那样，可以使用变量、函数等。

# 2. 变量(Variables) #

## 2.1 基本用法 ##

@color1:#000000;
    @color2:@color1 + #c0c0c0;
    
    #header{
      color: @color2;
    }
    
    
    compiles output:
    
    #header{
      color:#c0c0c0;
    }

## 2.2 变量插值 ##

2.1中变量用来控制*CSS规则中的值*，但是它们也可以在其他地方使用，例如选择器名称，属性名称，URL和`@import`语句。甚至其他应用。

### 2.2.1  变量插值应用在选择器名称 ###

@my-banner:banner;
    
    .@{my-banner}{
      font-size:20px;
      font-weight: bold;
    }
    
    
    compiles output:
    
    .banner{
      font-size:20px;
      font-weight: bold;    
    }

### 2.2.2  变量插值应用在属性名称 ###

@property:color;
    
    .widget{
        @{property}:#0ee;
        background-@{property}:#000;
    }
    
    
    comlpiles output:
    
    .widget{
        color:#0ee;
        background-color:#000;
    }

### 2.2.3  变量插值应用在urls ###

@images: "../images";
    
    .img{
        color:#e0e0e0;
        background:url("@{images}/white-bg.png");
    }
    
    
    compiles output:
    
    
    .img{
        color:#e0e0e0;
        background:url("../images/white-bg.png");
    }

### 2.2.4  变量插值应用在import声明 ###

@other-css-path:"./css/themes";
    
    @import "@{other-css-path}/base.less";
    
    
    
    compiles output:
    
    
    @import  "./css/themes/base.less"

### 2.2.5 变量插值应用在变量名称 ###

@var1:"Hello, world!";
    @var2:"var1";
    
    .bg:after{
        content:@@var2;
    }
    
    
    
    compiles output:
    
    .bg:after{
        content:"Hello, world!";
    }

### 2.2.6 变量可以后声明，不必提前声明 ###

.lazy-eval{
        width:@var;
    }
    
    @var:@a;
    @a:9%;
    
    /*等价于*/
    
    .lazy-eval{
        width:@var;
        @a:9%;
    }
    
    @var:@a;
    
    
    compiles output:
    
    .lazy-eval{
        width:9%;
    }

### 2.2.7  \{ \} 可以隔离变量作用域 ###

\{ \} 可以变量作用域，查找变量时，在当前scope中查找，如果找不到则向上一级作用域查找；在同一作用域中，定义多次的变量，取最后一次定义的值。

@var:0;
    
    .class{
      @var:2;
      .bass{
         @var:2;
         three:@var;
         @var:3;
      }
      one:@var;
    }
    
    
    compiles output:
    
    .class{
        one:2;
    }
    
    .class .bass {
        three:3;
    }

### 2.2.8  覆盖默认变量值 ###

有时我们会请求默认变量-一种仅在尚未设置变量的情况下才可以设置的功能。不需要此功能是因为您可以通过在后面放置定义轻松地覆盖变量。

/*在 libary.less中*/
    @base-color: green;
    @dark-color:darken(@base-color,10%);
    
    /*use of libary.ledd*/
    
    @import "libary.less";
    @base-color:red;
    
    
    compiles output:
    
    @dark-color是深红色，不是深绿色。延迟加载的原因

# 3.  混入（Mixins） #

混合是一种将一组属性从一个规则集中包含（“混入”）到另一个规则集中的方法。当一个css的样式要应用到另一个css的样式时，可以将另一个css样式名混入进去。

## 3.1 普通用法 ##

### 3.1.1 基本用法 ###

.bordered {
        border-top:dotted 1px solid;
    }
    
    /*另一个css样式也需要上面相同的样式，则如下写法*/
    
    #menu a {
        color:#111;
        .bordered;
    }
    
    
    compiles output:
    
    #menu a {
        color:#111;
        border-top:dotted 1px solid;
    }

### 3.1.2  不输出要混入的样式 ###

如果要创建一个mixin，只是想应用它，但又不想输出该mixin，则可以在其后加上括号。

.my-mixin {
        color:#000;
    }
    /*不希望输出 my-other-mixin */
    .my-other-mixin() {
        background:white;
    }
    .class {
        .my-mixin;
        .my-other-mixin; /*或者.my-other-mixin();*/ 
    }
    
    
    compiles output:
    
    .class {
        color:#000;
        background:white;
    }

### 3.1.3 混入中可包含选择器 ###

Mixins不仅可以包含属性，还可以包含选择器。

.my-hover-mixin() {
      &:hover {
        border: 1px solid red;
      }
    }
    button {
      .my-hover-mixin();
    }
    
    
    compiles output:
    
    button:hover {
      border: 1px solid red;
    }

### 3.1.4  ID和类名可以用作命名空间 ###

如果要在更复杂的选择器中混合属性，则可以堆叠多个ID或类。不同类名之间的空格是可选的。这种用法的一种使用称为命名空间。您可以将mixins放在id选择器下，以确保它不会与另一个库冲突。

#outer {
      .inner {
        color: red;
      }
    }
    
    .c {
      #outer > .inner;
    }
    
    // all do the same thing
    
    #outer > .inner;
    #outer > .inner();
    #outer .inner;
    #outer .inner();
    #outer.inner;
    #outer.inner();

### 3.1.5  使用when进行命名空间的保护 ###

如果名称空间具有保护，则仅当保护条件返回true时，才使用由其定义的mixin。命名空间保护的评估方式与mixin的保护方式完全相同，因此接下来的两个mixin的工作方式相同：

#namespace when (@mode=huge){
        .mixin(){
        }
    }
    
    #namespace {
        .mixin() when (@mode=huge){
        }
    }

`    default`对于所有嵌套的名称空间和mixin，假定该函数具有相同的值。永远不会评估以下mixin，因此保证其警惕之一是错误的。几人理解是，下面最内层的css属性值永远不会被执行到。

#sp_1 when (default()) {
      #sp_2 when (default()) {
        .mixin() when not(default()) { /* */ }
      }
    }

### 3.1.6  在mixin调用后使用!important，后续所有属性都标记为 !important ###

.foo (@bg: #f5f5f5, @color: #900) {
      background: @bg;
      color: @color;
    }
    .unimportant {
      .foo();
    }
    .important {
      .foo() !important;
    }
    
    compiles output:
    
    .unimportant {
      background: #f5f5f5;
      color: #900;
    }
    .important {
      background: #f5f5f5 !important;
      color: #900 !important;
    }

## 3.2 参数混入（Parametric Mixins） ##

Mixins还可以接受参数，这些参数是在混合时传递到选择器块的变量。

### 3.2.1  混入中传参数，或者参数指定默认值         ###

混入可以加参数，参数在调用混入的时候传入，也可以指定默认值；指定默认值时，调用的时候，可以不加（）

.border-radius(@radius) {
      -webkit-border-radius: @radius;
         -moz-border-radius: @radius;
              border-radius: @radius;
    }
    #header {
      .border-radius(4px);
    }
    
    compiles output:
    
    #header {
      -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
              border-radius: 4px;    
    }

.border-radius(@radius: 5px) {
      -webkit-border-radius: @radius;
         -moz-border-radius: @radius;
              border-radius: @radius;
    }
    #header {
        .border-radius;
    }
    
    compiles output :
    
    #header {
      -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
              border-radius: 5px;
    }

### 3.2.2 不带参数的参数混合，可以在CSS规则集中不输出 ###

.wrap() {
      text-wrap: wrap;
      white-space: -moz-pre-wrap;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    
    pre { .wrap }
    
    
    compiles output :
    
    pre {
      text-wrap: wrap;
      white-space: -moz-pre-wrap;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

### 3.2.3  多个参数的混入最好使用 ；分割，可以有名称的参数名相同的混入 ###

多个参数的混入，建议使用 分号 分割，因为符号逗号具有双重含义：可以解释为mixin参数分隔符或css列表分隔符。使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。另一方面，如果编译器在mixin调用或声明中看到至少一个分号，则假定参数用分号分隔，并且所有逗号都属于css列表：

*  两个参数，每一个包含逗号分隔的列表：`.name(1, 2, 3; something, else)`，
 *  三个参数，并且每个包含一个数字：`.name(1, 2, 3)`，
 *  使用虚拟分号创建混入调用一个包含参数逗号分隔的CSS列表：`.name(1, 2, 3;)`，
 *  逗号分隔的默认值：`.name(@param1: red, blue;)`。

定义具有相同名称和数量的参数的多个混合是合法的。当调用一个重名的混入时，只要参数是确定的，都可被调用到。

.mixin(@color) {
      color-1: @color;
    }
    .mixin(@color; @padding: 2) {
      color-2: @color;
      padding-2: @padding;
    }
    .mixin(@color; @padding; @margin: 2) {
      color-3: @color;
      padding-3: @padding;
      margin: @margin @margin @margin @margin;
    }
    .some .selector div {
      .mixin(#008000);
    }
    
    compiles output:
    
    .some .selector div {
      color-1: #008000;
      color-2: #008000;
      padding-2: 2;
    }

### 3.2.4 传参可与顺序无关 ###

混合引用可以通过名称而不是位置来提供参数值。可以通过名称来引用任何参数，并且它们不必采用任何特殊顺序：

.mixin(@color: black; @margin: 10px; @padding: 20px) {
      color: @color;
      margin: @margin;
      padding: @padding;
    }
    .class1 {
      .mixin(@margin: 20px; @color: #33acfe);
    }
    .class2 {
      .mixin(#efca44; @padding: 40px);
    }
    
    compiles output:
    
    .class1 {
      color: #33acfe;
      margin: 20px;
      padding: 20px;
    }
    .class2 {
      color: #efca44;
      margin: 10px;
      padding: 40px;
    }

### 3.2.5 @arguments取所有参数值 ###

`@arguments`在mixin内部有特殊含义，它包含调用mixin时传递的所有参数。无需单个输入

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
      -webkit-box-shadow: @arguments;
         -moz-box-shadow: @arguments;
              box-shadow: @arguments;
    }
    .big-block {
      .box-shadow(2px; 5px);
    }
    
    compiles output:
    
    .big-block {
      -webkit-box-shadow: 2px 5px 1px #000;
         -moz-box-shadow: 2px 5px 1px #000;
              box-shadow: 2px 5px 1px #000;
    }

### 3.2.6  @reset 可变参数数量 ###

`...`如果您希望mixin接受可变数量的参数，则可以使用。在变量名之后使用此命令会将这些参数分配给变量。

.mixin(...) {  }      // matches 0-N arguments
    .mixin() {    }       // matches exactly 0 arguments
    .mixin(@a: 1) {  }    // matches 0-1 arguments
    .mixin(@a: 1; ...) {  } // matches 0-N arguments
    .mixin(@a; ...) {  }  // matches 1-N arguments
    
    .mixin(@a; @rest...) {
       // @rest is bound to arguments after @a
       // @arguments is bound to all arguments
    }

这块儿有疑问，使用koala报错。

### 3.2.7  模式匹配，根据传递的参数，改变混合的行为 ###

根据传递给它的参数来更改混合的行为。可以将参数定义为变量，匹配不同的混合。@\_ 匹配任何参数

.mixin(dark; @color) {
      color: darken(@color, 10%);
    }
    .mixin(light; @color) {
      color: lighten(@color, 10%);
    }
    .mixin(@_; @color) {
      display: block;
    }
    
    @switch: light;
    
    .class {
      .mixin(@switch; #888);
    }
    
    compiles output:
    
    .class {
        color:#a2a2a2;
        display: block;
    }

*  第一个mixin定义不匹配，因为它应`dark`作为第一个参数。
 *  第二个mixin定义匹配，因为它符合预期`light`。
 *  第三个mixin定义匹配，因为它期望任何值。

仅使用匹配的混合定义。变量匹配并绑定到任何值。除变量外，其他任何事物都仅与等于其自身的值匹配。

我们还可以匹配使用arity。

.mixin(@a) {
      color: @a;
    }
    .mixin(@a; @b) {
      color: fade(@a; @b);
    }

如果`.mixin`使用单个参数调用，则将获取第一个定义的输出，但是如果使用*两个*参数调用，则将获取第二个定义，即`@a`淡出为`@b`

## 3.3 Mixins as Functions ##

混合中定义的变量和混合是可见的，可以在调用者的作用域中使用。只有一个例外，如果调用者包含具有相同名称的变量（其中包括由另一个mixin调用定义的变量），则不会复制变量。仅存在于调用者本地范围内的变量受到保护。从父范围继承的变量将被覆盖。

.mixin() {
      @width:  100%;
      @height: 200px;
    }
    
    .caller {
      .mixin();
      width:  @width;
      height: @height;
    }
    
    compiles output:
    
    .caller {
      width:  100%;
      height: 200px;
    }

因此，mixin中定义的变量可以用作其返回值。这使我们可以创建可以像函数一样使用的mixin。

.average(@x, @y) {
      @average: ((@x + @y) / 2);
    }
    
    div {
      .average(16px, 50px); // "call" the mixin
      padding: @average;    // use its "return" value
    }
    
    compiles output:
    
    div{
        padding:33px;
    }

在调用者作用域中直接定义的变量不能被覆盖。但是，在调用者父作用域中定义的变量不受保护，将被覆盖：

.mixin() {
      @size: in-mixin;
      @definedOnlyInMixin: in-mixin;
    }
    
    .class {
      margin: @size @definedOnlyInMixin;
      .mixin();
    }
    
    @size: globaly-defined-value; // callers parent scope - no protection
    
    compiles output:
    
    .class {
      margin: in-mixin in-mixin;
    }

在mixin中定义的mixin也充当返回值：

.unlock(@value) { // outer mixin
      .doSomething() { // nested mixin
        declaration: @value;
      }
    }
    
    #namespace {
      .unlock(5); // unlock doSomething mixin
      .doSomething(); //nested mixin was copied here and is usable
    }
    
    compiles output:
    
    #namespace {
      declaration: 5;
    }

## 3.4 混合守卫（Mixin Guards）         ##

当您想在*表达式*上进行匹配时，与简单值或Arity相反，保护很有用。如果您熟悉函数式编程，那么您可能已经遇到过。

为了尽量保持CSS的声明性，Less选择了通过受**保护的mixins**而不是`if`/`else`语句来实现条件执行，这与`@media`查询功能规范类似。

关键是使用when关键字，引入了一个保护序列

.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) }
    
    compiles output:
    
    .class1 {
      background-color: black;
      color: #ddd;
    }
    .class2 {
      background-color: white;
      color: #555;
    }

### 3.4.1 比较操作符 guard ###

在guard中，使用到的完整的比较运算符是：`>`，`>=`，`=`，`=<`，`<。`此外，关键字`true`是唯一的真实值，使这两个mixins等效：

.truth (@a) when (@a) { ... }
    .truth (@a) when (@a = true) { ... }
    .class {
      .truth(40); // Will not match any of the above definitions.
    }
    .class {
      .truth(mobile); // Will not match any of the above definitions.
    }
    .class {
      .truth(true); // will match any of the above
    }

### 3.4.2 逻辑运算符 guard ###

可以将逻辑运算符 ：并且(and) 、或者(，) 、非（not）与比较运算符一起使用

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
    //  满足 isNumber(@a) 和 @a > 0 时
    
    .mixin (@a) when (@a > 10), (@a < -10) { ... }
    // 满足 @a > 10 或者 @a < -10 时
    
    .mixin (@b) when not (@b > 0) { ... }
    // 不满足 @b > 0 时

### 3.4.3 类型检查guard ###

基于值类型匹配混合，则可以使用以下`is`功能

.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
    .mixin (@a; @b: black) when (iscolor(@b)) { ... }

基本的类型检查功能，有如下：

*  `iscolor`
 *  `isnumber`
 *  `isstring`
 *  `iskeyword`
 *  `isurl`

如果要检查值是否是数字，是否还使用特定单位，则可以使用以下方法之一：

*  `ispixel`
 *  `ispercentage`
 *  `isem`
 *  `isunit`

### `3.4.4 条件混合` ###

该`default`函数可用于根据其他混合匹配来进行混合匹配，并且您可以使用它来创建类似于`else`或`default`语句（分别为`if`和`case`结构）的“条件混合” 。

.mixin (@a) when (@a > 0) { ...  }
    .mixin (@a) when (default()) { ... } // matches only if first mixin does not, i.e. when @a <= 0

## 3.5 扩展（extend） ##

Extend是一个Less伪类，它将合并的选择器与匹配其引用的选择器合并。书写形如下：

nav ul {
      &:extend(.inline);
      background: blue;
    }
    .inline {
        border:1px solid #c0c0c0;
    }
    
    compilies output:
    
    nav ul {
        background:blue;
    }
    .inline,nav ul{
      border:1px solid #c0c0c0;  
    }

**扩展css技巧： 类a样式扩展另一个类b样式，编译输出时，相当于先将a和b的类样式编译输出，然后复制一份b的类样式，将b用a替换即可。**

### 3.5.1  扩展附加所有包含某类的样式，或者扩展多个类样式 ###

扩展要么附加到选择器，要么放置在规则集中。看起来像是带有选择器参数的伪类（可选）。如果要扩展所有包含b类的样式，则后跟关键字`all；如果要扩展多个类的样式，则多个类使用逗号分隔开。`

`   扩展后跟 all 例子如下：`

nav ul {
      &:extend(.inline all);
      background: blue;
    }
    .inline {
      color: red;
      .online {
      	background:yellow;
      }
    }
    
    compilies output:
    nav ul {
      background: blue;
    }
    
    .inline,
    nav ul {
      color: red;
    }
    
    .inline .online,
    nav ul .online {
      background: yellow;
    }

扩展 多个类，用 逗号隔开例子

.e {
        line-height:30px;
    	&:extend(.f,.g);
    }
    .f{
    	width:100px;
    }
    .g{
    	height:100px;
    }
    
    /*上述的扩展等价于下面的扩展*/
    .e:extand(.f,.g){
        line-height:30px;
    }
    .f{
    	width:100px;
    }
    .g{
    	height:100px;
    }
    
    /*等价于*/
    .e{
      line-height:30px;  
    }
    .e:extend(.f);
    .e:extend(.g);
    .f{
        width:100px;
    }
    .g{
        height:100px;
    }
    
    compiles output:
    
    .e{
        line-height:30px;
    }
    .f,.e{
        width:100px;
    }
    .g,.e{
        height:100px;
    }

### 3.5.2  扩展附加到选择器(Expand Attached to Selector) ###

1.  扩展到选择器后：  pre:hover:extend(div pre)\{ \}
2.  选择器和扩展之间可以有空格：pre:hover    :extend(div pre)\{ \}
3.  连续多个扩展是允许的：pre:hover:extend(div pre):extend(.bucket tr) \{ \} ，相当于： pre:hover:extend(div pre, .bucket tr)\{ \}
4.  有扩展的话，必须以扩展结尾。pre:hover:extend(div pre).nth-child(odd)  这个是不允许的。

### 3.5.2 扩展内部规则集 ###

可以使用`&:extend(selector)`语法将扩展放置到规则集的主体中。将扩展放置到主体中是将其放入该规则集的每个选择器的快捷方式。

pre:hover,
    .some-class {
      &:extend(div pre);
    }
    
    /*等价于*/
    
    pre:hover:extend(div pre),
    .some-class:extend(div pre) {
    }

## 3.5.3 不带all就是精确匹配，以及和css不一样的匹配 ##

1.  **\*.class 和 .class 不匹配**

.a.class,
    .class.a,
    .class > .a {
      color: blue;
    }
    .test:extend(.class) {} // this will NOT match the any selectors above
    
    
    
    
    *.class {
      color: blue;
    }
    .noStar:extend(.class) {} // this will NOT match the *.class selector

**2. 伪类的顺序很重要。**选择器`link:hover:visited`和`link:visited:hover`匹配相同的元素集，但是extend将它们视为不同的元素：

**     3. Nth个表达式`1n+3`和`n+3`是等效的，但extend与它们不匹配：**

:nth-child(1n+3) {
      color: blue;
    }
    .child:extend(:nth-child(n+3)) {}
    
    output:
    
    :nth-child(1n+3) {
      color: blue;
    }

**   4.属性选择器中的引用类型无关紧要。以下所有都是等效的。**

[title=identifier] {
      color: blue;
    }
    [title='identifier'] {
      color: blue;
    }
    [title="identifier"] {
      color: blue;
    }
    
    .noQuote:extend([title=identifier]) {}
    .singleQuote:extend([title='identifier']) {}
    .doubleQuote:extend([title="identifier"]) {}
    
    
    /*输出*/
    [title=identifier],
    .noQuote,
    .singleQuote,
    .doubleQuote {
      color: blue;
    }
    
    [title='identifier'],
    .noQuote,
    .singleQuote,
    .doubleQuote {
      color: blue;
    }
    
    [title="identifier"],
    .noQuote,
    .singleQuote,
    .doubleQuote {
      color: blue;
    }

### 3.5.4  带扩展的选择器插值被匹配 ###

1.  具有变量的选择器将不匹配：

@variable: .bucket;
    @{variable} { // interpolated selector
      color: blue;
    }
    .some-class:extend(.bucket) {} // does nothing, no match is found

**2.** 在目标选择器中使用变量扩展不匹配任何内容：

.bucket {
      color: blue;
    }
    .some-class:extend(@{variable}) {} // interpolated selector matches nothing
    @variable: .bucket;

**  3. **将其`:extend`附加到插值选择器是可以匹配的：

.bucket {
      color: blue;
    }
    @{variable}:extend(.bucket) {}
    @variable: .selector;
    
    output:
    
    .bucket, .selector {
      color: blue;
    }

### 3.5.5  在@media内扩展，匹配这个@media内的 ###

** 1. 在媒体声明中编写的扩展应该只匹配同一媒体声明中的选择器**

@media print {
      .screenClass:extend(.selector) {} // extend inside media
      .selector { // this will be matched - it is in the same media
        color: black;
      }
    }
    .selector { // ruleset on top of style sheet - extend ignores it
      color: red;
    }
    @media screen {
      .selector {  // ruleset inside another media - extend ignores it
        color: blue;
      }
    }
    
    
    output:
    @media print {
      .selector,
      .screenClass { /*  ruleset inside the same media was extended */
        color: black;
      }
    }
    .selector { /* ruleset on top of style sheet was ignored */
      color: red;
    }
    @media screen {
      .selector { /* ruleset inside another media was ignored */
        color: blue;
      }
    }

**    2. 在媒体声明中编写的扩展与嵌套声明中的选择器不匹配：**

@media screen {
      .screenClass:extend(.selector) {} // extend inside media
      @media (min-width: 1023px) {
        .selector {  // ruleset inside nested media - extend ignores it
          color: blue;
        }
      }
    }
    
    output:
    @media screen and (min-width: 1023px) {
      .selector { /* ruleset inside another nested media was ignored */
        color: blue;
      }
    }

**3. 顶级扩展匹配所有内容，包括嵌套媒体中的选择器：**

@media screen {
      .selector {  /* ruleset inside nested media - top level extend works */
        color: blue;
      }
      @media (min-width: 1023px) {
        .selector {  /* ruleset inside nested media - top level extend works */
          color: blue;
        }
      }
    }
    
    .topLevel:extend(.selector) {} /* top level extend matches everything */
    
    
    output:
    
    @media screen {
      .selector,
      .topLevel { /* ruleset inside media was extended */
        color: blue;
      }
    }
    @media screen and (min-width: 1023px) {
      .selector,
      .topLevel { /* ruleset inside nested media was extended */
        color: blue;
      }
    }

### 3.5.6  扩展的类没有重复检测 ###

.alert-info,
    .widget {
      /* declarations */
    }
    
    .alert:extend(.alert-info, .widget) {}
    
    
    output:
    
    .alert-info,
    .widget,
    .alert,
    .alert {
      /* declarations */
    }

### 3.5.7 经典扩展例子 ###

避免添加基类

/*html*/
    <a class="animal bear">Bear</a>
    
    /*css*/
    .animal {
      background-color: black;
      color: white;
    }
    .bear {
      background-color: brown;
    }
    
    /*简化写法*/
    
    /*html*/
    <a class="bear">Bear</a>
    
    /*css*/
    .animal {
      background-color: black;
      color: white;
    }
    .bear {
      &:extend(.animal);
      background-color: brown;
    }

### 3.5.7  减少CSS大小 ###

Mixins将所有属性复制到选择器中，这可能导致不必要的重复。因此，您可以使用扩展而不是混合来将选择器上移到您要使用的属性，从而减少生成的CSS。

使用扩展代替混合，减少输出的CSS

.my-inline-block() {
        display: inline-block;
      font-size: 0;
    }
    .thing1 {
      .my-inline-block;
    }
    .thing2 {
      .my-inline-block;
    }
    
    output:
    .thing1 {
      display: inline-block;
      font-size: 0;
    }
    .thing2 {
      display: inline-block;
      font-size: 0;
    }
    
    /*使用扩展代替混合，减少css*/
    .my-inline-block {
      display: inline-block;
      font-size: 0;
    }
    .thing1 {
      &:extend(.my-inline-block);
    }
    .thing2 {
      &:extend(.my-inline-block);
    }
    
    output:
    .my-inline-block,
    .thing1,
    .thing2 {
      display: inline-block;
      font-size: 0;
    }

### 3.5.8  高级混合 ###

另一个用例是替代mixin的方法-因为mixins仅可用于简单的选择器，如果您有两个不同的html块，但需要对它们应用相同的样式，则可以使用扩展来关联两个区域。

li.list > a {
      // list styles
    }
    button.list-style {
      &:extend(li.list > a); // use the same list styles
    }

### 3.5.9 passing rulesets to mixins ###

分离的规则集是一组CSS属性，嵌套规则集，媒体声明或存储在变量中的任何其他内容。您可以将其包括在规则集中或其他结构中，并且其所有属性都将复制到那里。您还可以将其用作mixin参数，并将其作为其他任何变量传递。**分离规则集调用后的括号是必需的。**

// declare detached ruleset
    @detached-ruleset: { background: red; };
    
    // use detached ruleset
    .top {
        @detached-ruleset(); 
    }
    
    
    outputs:
    
    .top {
        background:red;
    }

当您要定义一个混合来抽象出在媒体查询中包装一段代码或不支持的浏览器类名时，此功能很有用。可以将规则集传递给mixin，以便mixin可以包装内容，

.desktop-and-old-ie(@rules){
        @media screen and (min-width:1200) {@rules();}
        html.lt-ie9 & {@rules();}
    }
    header{
        background-color: blue;
        .desktop-and-old-ie({
            background-color: red;
        })
    }
    
    
    //输出
    
    header {
      background-color: blue;
    }
    @media screen and (min-width: 1200) {
      header {
        background-color: red;
      }
    }
    html.lt-ie9 header {
      background-color: red;
    }

可以将规则集分配给变量或传递给mixin，并且可以包含较少特征的完整集合。甚至使用媒体查询，定义特征值。

@my-ruleset: {
        .my-selector {
          @media tv {
            background-color: black;
          }
        }
      };
    @media (orientation:portrait) {
        @my-ruleset();
    }
    
    //输出
    
    @media (orientation:portrait) and tv {
       .my-selector {
          background-color: black;
        } 
    }

分离的规则集调用以与mixin调用相同的方式将其所有mixin解锁（返回）到调用者中。但是，它不返回变量。

// detached ruleset with a mixin
    @detached-ruleset: { 
        .mixin() {
            color:blue;
        }
    };
    // call detached ruleset
    .caller {
        @detached-ruleset(); 
        .mixin();
    }
    
    //输出
    .caller {
        color:blue;
    }

可以定义私有变量

detached-ruleset: { 
        @color:blue; // this variable is private
    };
    .caller {
        color: @color; // syntax error
    }

**范围界定**

**        **1、分离的规则集可以访问调用者内定义的变量，也可以访问到全局变量，当调用者内部的变量和全局变量相同时，优先使用全局变量。

@detached-ruleset:{
        caller-variable:@caller-variable;
        .caller-mixin();
    }
    
    selector {
        @detached-ruleset();
        @caller-variable:value;
        .caller-mixin(){
            variable: declaration;
        }
    }
    
    //输出
    
    selector {
        caller-varibale: value;
        variable: declaration;
    }

@variable: global;
    @detached-ruleset:{
        variable: @variable;
    }
    
    selector {
        @detached-ruleset();
        @variable: value;
    }
    
    //输出
    
    selector {
        variable: global;
    }

2、引用规则集，被引用的规则集无法访问引用者内部的变量

@detached-1: { scope-detached: @one @two };
    
    .one {
        @one : visible;
        .tow {
            @detached-2: @detached-1;
            @two: visible;
        }
    }
    
    .use-place {
        .one > .tow;
        @detached-2();
    }
    
    
    //输出
    ERRPR: 1:32 The varibale '@one' was not defined .

3、解锁可以使分离的规则集 可以访问到引用者中的变量，其实就是应用了混合

#space {
      .importer-1() {
        @detached: { scope-detached: @variable; }; // define detached ruleset
      }
    }
    
    .importer-2() {
      @variable: value; // unlocked detached ruleset CAN see this variable
      #space > .importer-1(); // unlock/import detached ruleset
    }
    
    .use-place {
      .importer-2(); // unlock/import detached ruleset second time
       @detached();
    }
    
    //输出
    .use-place {
      scope-detached: value;
    }

## 3.6 import 指令 ##

在标准CSS中，`@import`规则必须位于所有其他类型的规则之前。但是Less.js不在乎您将`@import`语句放在何处。

.foo {
      background: #900;
    }
    @import "this-is-valid.less";

### 3.6.1 import文件扩展名 ###

`@import` 取决于文件扩展名，Less可以对语句进行不同的处理：

*  如果文件具有`.css`扩展名，它将被视为CSS，并且该`@import`语句保持原样（请参见下面的[内联选项][Link 1]）。
 *  如果有*其他扩展名*，则将其视为Less并导入。
 *  如果没有扩展名，`.less`将被附加，并将作为导入的Less文件包含在内。

@import "foo";      // foo.less is imported
    @import "foo.less"; // foo.less is imported
    @import "foo.php";  // foo.php imported as a less file
    @import "foo.css";  // statement left in place, as-is

### 3.6.2 import可使用的关键字       ###

Syntax: `@import (keyword) "filename"; 可以设置多个关键字，以逗号隔开`

The following import directives have been implemented:

*  `reference`: 使用一个less文件，但是不输出
 *  `inline`: 在输出中包含源文件，但是不处理它
 *  `less`: 无论引入的文件后缀是什么，都把它当成less文件
 *  `css`: 无论引入的文件后缀是什么，都把它当成css文件
 *  `once`: 仅包含一次该文件
 *  `multiple`: 可以多次包含该文件
 *  `optional`: 当引入的文件找不到时，继续编译

[Link 1]: http://lesscss.cn/features/#import-options-inline