作用域

Less 的一些额外的作用域特性。

### 混入作用域特性
直观地，mixin 可以访问定义作用域。

```less
#ns {
  @a: one;
  .mixin-1() {
    prop: @a;
  }
}
.rule {
  #ns.mixin-1();
}

/* OUTPUTS:
.rule {
  prop: one;
}
*/
```

### 弃用的混入作用域特性
这是可能在未来版本中删除的 mixin 作用域功能列表。

#### #1.(DEPRECATED)混入可以访问调用者作用域。
```less
#ns {
  .mixin-1() {
    prop: @a;
  }
}
.rule {
  @a: one;
  #ns.mixin-1();
}
/* OUTPUTS:
.rule {
  prop: one;
}
*/
```
这是违反直觉的，因为：

1. 这在大多数其他语言中并不典型。
3. 在查看定义时，mixin 将产生什么输出并不是很明显。

首选方法：传入你希望对 mixin 可见的变量。

```less
#ns {
  .mixin-1(@a) {
    prop: @a;
  }
}
.rule {
  #ns.mixin-1(@a: one);
}
```

#### #2.(DEPRECATED)调用者作用域可以访问混入中的变量
Mixins 会将它们的变量推送到调用者作用域，但前提是该变量未在本地定义。

```less
#ns {
  .mixin-1() {
    @a: one;
    @b: two;
  }
}
.rule {
  @b: three;
  #ns.mixin-1();
  prop-1: @a;
  prop-2: @b;
}
/* OUTPUTS:
.rule {
  prop-1: one;
  prop-2: three;
}
*/
```
这是违反直觉的，因为：

1. 调用者作用域中更高的变量可以被覆盖。
2. 这也不是典型的语言行为。
3. 它不同于分离规则集的行为。

此外，随着映射的引入，你可以直接检索变量值（和混合）。

首选方法：

```less
#ns {
  .mixin-1() {
    @a: one;
    @b: two;
  }
}
.rule {
  @returns: #ns.mixin-1();
  prop-1: @returns[@a];
  prop-2: @returns[@b];
}
/* OUTPUTS:
.rule {
  prop-1: one;
  prop-2: two;
}
*/
```

#### #3.(DEPRECATED)调用者作用域可以从混入访问混入
与弃用的变量行为类似，mixins 也被推入调用者作用域。然而，与变量不同的是，与合并作用域混入同名的混入被合并。

```less
#ns {
  .mixin-1() {
    prop-1: one;
    prop-2: two;
  }
}
.rule {
  #ns();
  .mixin-1();
  .mixin-1() {
    prop-3: three;
  }
}
/* OUTPUT:
.rule {
  prop-1: one;
  prop-2: two;
  prop-3: three;
}
*/
```
首选方法：直接调用 mixins。

```less
#ns {
  .mixin-1() {
    prop-1: one;
    prop-2: two;
  }
}
.rule {
  .mixin-1() {
    prop-3: three;
  }
  #ns.mixin-1();
  .mixin-1();
}
/* OUTPUT:
.rule {
  prop-1: one;
  prop-2: two;
  prop-3: three;
}
*/
```

### 提示与技巧
信用：[less/less.js/issues/1472](https://github.com/less/less.js/issues/1472#issuecomment-22213697 "less/less.js/issues/1472")

这里有一个技巧，用于定义变量并将它们保存在一些私有作用域内，以防止它们泄漏到全局空间。

```less
& {
  // Vars
  @height: 100px;
  @width: 20px;
  // Don't define any prop:value on this scope (as doing so will generate (wrong) output).

.test {
    height: @height;
    width: @width;
  }
}

.rest {
  height: @height; // Name error: variable @height is undefined
}
```
此处，`@height` 和 `@width` 仅为 `& { ... }` 创建的作用域定义。你还可以在规则中嵌套作用域：

```less
.some-module {
  @height: 200px;
  @width: 200px;
  text-align: left;
  line-height: @height; // 200px

& {
    // Override original values
    @height: 100px;
    @width: auto;

.some-module__element {
      height: @height; // 100px
      width: @width; // 200px
    }

.some-module__element .text {
      line-height: (@height / 2); // 50px
    }
  }

& {
    // Override original values
    @height: 50px;

.some-module__another-element {
      height: @height; // 50px
      width: @width; // 200px
    }

.some-module__another-element .text {
      line-height: (@height / 2); // 25px
    }
  }
}
```