天天看點

将規則集傳遞給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;
  }