乐趣区

将规则集传递给mixin

jiezi

允许包装在 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;}
退出移动版