將規則集傳遞給mixin

容許包裝在mixin中定義的css塊。

分離的規則集是一組CSS屬性、嵌套規則集、媒體聲明或者是存儲在變量中的任何其餘內容，咱們能夠將它包含在規則集中或其餘結構中，而且全部屬性都將複製到那裏；咱們還能夠將它用做mixin參數，並將它做爲其餘任何變量傳遞。

// 聲明分離的規則
    @rule_set: { color: green; };
    // 使用分離的規則集
    .xkd {
        @rule_set(); 
    }
    
    // 輸出結果
    .xkd{
        color: green;
    }

分離規則集以後調用的括號是必需的，調用@rule_set不起做用。

當咱們想要定義一個mixin時，它很是有用，這個mixin能夠抽象出媒體查詢中的一段代碼或者不受支持的瀏覽器類名；規則集能夠傳遞給mixin，這樣mixin能夠包裝內容。

做用域

分離的規則集可使用在定義和調用位置均可訪問的全部變量和混合，不然定義和調用方做用域均可用，若是兩個做用域包含相同的變量或混合，則須要聲明做用域值優先。

聲明範圍是定義獨立規則集主體的範圍，將分離的規則集從一個變量複製到另外一個變量沒法修改其範圍，僅在其中引用該規則集就沒法訪問新範圍，分離的規則集能夠經過被解鎖（導入）到做用域中來訪問。

• 定義和調用範圍可見性：變量和mixin在分離的規則集中定義。

  // 分離的規則集能夠看到調用方的變量和混合宏
      @rule_set: {
        // 變量未定義
        define-variable: @define-variable; 
        // mixin未定義
        .define-mixin();
      };
  
      selector {
        // 使用分離的規則集
        @rule_set(); 
        // 定義分離規則集中所需的變量和mixin
        @define-variable: value;
        .define-mixin() {
          variable: declaration;
        }
      }
  
      // 輸出結果
      selector {
        define-variable: value;
        variable: declaration;
      }

• 引用將不會修改分離的規則集範圍：僅僅給出引用，規則集不訪問任何新的範圍。

  // 規則集不能僅在其中引用而得到對新做用域的訪問
     @rule_set1: { scope-detached: @one @two; };
     .one {
       @one: visible;
       .two {
         // 複製/重命名規則集
         @rule_set2: @rule_set1;
         // 規則集沒法看到此變量
         @two: visible;
       }
     }
     .use-place {
       .one > .two(); 
       @rule_set2();
     }
  
     // 引起錯誤
     ERROR 1:32 The variable "@one" was not declared.

• 解鎖將修改分離的規則集範圍：分離的規則集能夠經過導入到範圍中來訪問。

  // 分離的規則集經過在範圍內解鎖（導入）來得到訪問權限
    #space {
      .unlock_1() {
        //定義分離的規則集
        @detached: { scope-detached: @variable; };
      }
    }
    .unlock_2() {
      // 解除鎖定的分離規則集能夠看到此變量
      @variable: value;
      // 解鎖/導入分離的規則集
      #space > .unlock-1();
    }
    .use-place {
      // 第二次解鎖/導入分離的規則集
      .unlock-2(); 
       @detached();
    }
  
    // 輸出結果
    .use-place {
      scope-detached: value;
    }