一、Mixin

Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set.

Mixins是一種將（一組樣式規則）添加到（另一組樣式規則中）的方法。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
 
}

Notice that when you call the mixin, the parentheses are optional.

當你使用一個Mixin的時候，（括號）是可選的。

If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.

你創建了一個Mixin但是不想這個Mixin輸出，那就在創建的時候在該Mixin後加上()。

.my-mixin {
  color: black;
}
.my-other-mixin() 
 
{
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

Mixins can contain more than just properties, they can contain selectors too.

Mixins 裏面不僅可以包含樣式，還可以嵌套（選擇器）。

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

If you want to mixin properties inside a more complicated selector, you can stack up multiple id‘s or classes.

如果你想使用一個有復雜選擇器嵌套的Mixin中的屬性，可以直接使用id或class連續定位到相應位置。

#outer {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner;
}

Output:
.c {
  color: red;
}

One use of this is known as namespacing. You can put your mixins under a id selector and this makes sure it won‘t conflict with another library.

最外層使用有id嵌套的Mixin可以形成一個新的命名空間以防止和別的樣式庫產生樣式沖突。

#my-library {
  .my-mixin() {
    color: black;
  }
}
// which can be used like this
.class {
  #my-library > .my-mixin;
}

If namespace have a guard, mixins defined by it are used only if guard condition returns true.

如果Mixin有guard(使用條件)，遵循guard規則，只有當gurd為true才編譯。

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

if you want to match mixins based on value type, you can use the is functions:

Here are the basic type checking functions:

iscolor
isnumber
isstring
iskeyword
isurl
If you want to check if a value is in a specific unit in addition to being a number, you may use one of:

ispixel
ispercentage
isem
isunit

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

Use the !important keyword after mixin call to mark all properties inherited by it as !important:

當使用mixin時後有 !important，則所有Mixin裏的樣式都會繼承!important。

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

Mixins can also take arguments, which are variables passed to the block of selectors when it is mixed in.

像是方法中添加arguments一樣，Mixin裏也可以添加arguments傳遞給MIxin屬性內部使用。

Parametric mixins can also have default values for their parameters or Multiple parameters.

也可以設置一個默認值；或是在使用的時候重新賦值覆蓋默認值。等等（-_-）。

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

@arguments has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful if you don‘t want to deal with individual parameters:

@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);
}

You can use ... if you want your mixin to take a variable number of arguments.

可以使用 ... 來表示有多個變量。關鍵詞@rest和javascript中的 rest 意義相似，表示除之前以聲明的變量以外的所有變量。

.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
}

Sometimes, you may want to change the behavior of a mixin, based on the parameters you pass to it. Let‘s start with something basic:

有時候你想要通過參數改變Mixin的功能，可以：

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

if we run:

@switch: light;

.class {
  .mixin(@switch; #888);
}

Output:

.class {
  color: #a2a2a2;
  display: block;
}

Only mixin definitions which matched were used. Variables match and bind to any value. Anything other than a variable matches only with a value equal to itself.

使用時，只有與Mixin中定義變量對應的才會被應用。

.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);
}
Output:
.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

Variables and mixins defined in a mixin are visible and can be used in caller‘s scope. Thus variables defined in a mixin can act as its return values.

在Mixin中定義的變量的作用域：調用者的作用域。也可以通過變量創造新的方法返回新的值。

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

.caller {
  .mixin();
  width:  @width;
  height: @height;
}

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

Variables defined directly in callers scope cannot be overridden. However, variables defined in callers parent scope is not protected and will be overridden。

直接定義在Mixin外部的全局變量會被定義在Mixin內部的局部變量重寫，跟javascript變量的作用域相似。但是定義在caller內部的變量會被忽視。

@variable: global;
@detached-ruleset: {
  // will use global variable, because it is accessible
  // from detached-ruleset definition
  variable: @variable; 
};

selector {
  @detached-ruleset();
  @variable: value; // variable defined in caller - will be ignored
}

mixin defined in mixin acts as return value too:

.unlock(@value) { // outer mixin
  .doSomething() { // nested mixin
    declaration: @value;
  }
}

#namespace {
  .unlock(5); // return .doSomething()
  .doSomething(); //use .doSomething()
}

A detached ruleset is a group of css properties, nested rulesets, media declarations or anything else stored in a variable. You can include it into a ruleset or another structure and all its properties are going to be copied there. You can also use it as a mixin argument and pass it around as any other variable.

ruleset 是樣式，選擇器嵌套，media聲明等存儲在變量中的集合。你可以直接使用這個集合也可以把它當作Mixin中的變量使用。此時必須在使用的時候加()

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

變量作用域這一方面好復雜。。。

不定內容就不寫上來了。

二、Merge

The merge feature allows for aggregating values from multiple properties into a comma or space separated list under a single property. merge is useful for properties such as background and transform.

Merge特性允許將多個屬性以逗號或是空格的形式寫在單個屬性下。像是background和transform等復合屬性。

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

less語言特性(翻譯)