将规则集传递给mixin

容许包装在mixin中定义的css块。css

分离的规则集是一组CSS属性、嵌套规则集、媒体声明或者是存储在变量中的任何其余内容，咱们能够将它包含在规则集中或其余结构中，而且全部属性都将复制到那里；咱们还能够将它用做mixin参数，并将它做为其余任何变量传递。浏览器

// 声明分离的规则
   @rule_set: { color: green; };
   // 使用分离的规则集
   .xkd {
       @rule_set(); 
   }
   
   // 输出结果
   .xkd{
       color: green;
   }

分离规则集以后调用的括号是必需的，调用@rule_set不起做用。spa

当咱们想要定义一个mixin时，它很是有用，这个mixin能够抽象出媒体查询中的一段代码或者不受支持的浏览器类名；规则集能够传递给mixin，这样mixin能够包装内容。code

做用域

分离的规则集可使用在定义和调用位置均可访问的全部变量和混合，不然定义和调用方做用域均可用，若是两个做用域包含相同的变量或混合，则须要声明做用域值优先。作用域

声明范围是定义独立规则集主体的范围，将分离的规则集从一个变量复制到另外一个变量没法修改其范围，仅在其中引用该规则集就没法访问新范围，分离的规则集能够经过被解锁（导入）到做用域中来访问。io

• 定义和调用范围可见性：变量和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;
      }

• 引用将不会修改分离的规则集范围：仅仅给出引用，规则集不访问任何新的范围。select

  // 规则集不能仅在其中引用而得到对新做用域的访问
      @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;
      }