将规则集传递给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;
    }