做爲函數混合

混合中定義的變量和混合是可見的，能夠在調用者的做用域中使用，只有一個例外，那就是若是調用方包含一個具備相同名稱的變量（其中包括由另外一個mixin調用定義的變量），則不會複製變量，僅存在於調用者本地範圍內的變量受到保護，而從父範圍繼承的變量將會被覆蓋。

• Mixin範圍

  由變量和混合組成的混合能夠在調用者的做用域中使用，而且是可見的。

• Mixin和返回值

  mixin相似於函數，在mixin中定義的變量將做爲它的返回值。

• Mixin定義另外一個mixin

  每當一個mixin定義在另外一個mixin中時，它能夠用做返回值。

示例：

// 1:正常使用
    .mixin(){
        @color: green;
        @border: 1px solid red;
        @font-size: 24px;
        @width: 100px;
        @height: 200px;
    }
    .allVar_mixin{
        .mixin();
        color: @color;
        border: @border;
        font-size: @font-size;
        width: @width;
        height: @height;
    }
    // 輸出結果
    .allVar_mixin{
        color: green;
        border: 1px solid red;
        font-size: 24px;
        width: 100px;
        height: 200px;
    }
    
    
    // 2:mixin中定義的變量用做返回值
    .var_reval(@a, @b) {
      @var_reVal: ((@a + @b) / 3);
    }
    div {
      .var_reVal(15px, 30px); 
      // 使用其返回值
      margin: @var_reVal;
    }
    // 輸出結果
    div {
      margin: 15px;
    }
    
    
    // 3:在調用者做用域中直接定義的變量不能被覆蓋,但在調用者父做用域中定義的變量不受保護會被覆蓋
    .mixin() {
      @cover: action_scope;
      @notcover: action_scope;
    }
    .xkd {
      padding: @cover @notcover;
      .mixin();
    }
    // 調用方父做用域沒有保護
    @cover: parent_scope; 
    // 輸出結果
    .xkd {
      padding: action_scope action_scope;
    }
    
    
    // 4:定義的mixin充當返回值
    // 外混合
    .unlock(@value) { 
    // 嵌套混合
      .mix_reval() { 
        declaration: @value;
      }
    }
    #namespace {
      // 解鎖一些混合
      .unlock(8); 
      // 嵌套的mixin被複制到這裏並可用
      .mix_reval(); 
    }
    // 輸出結果
    #namespace {
      declaration: 8;
    }