Less 將規(guī)則集傳遞給Mixins

2019-05-13 15:06 更新

描述

分離的規(guī)則集包含一個(gè)普通的規(guī)則集，如屬性，嵌套規(guī)則集，變量聲明，mixins等。它存儲(chǔ)在一個(gè)變量中，并包含到其他結(jié)構(gòu)中，其中規(guī)則集的所有屬性都將被復(fù)制到該結(jié)構(gòu)。


例子

以下示例將規(guī)則集傳遞到LESS文件中的mixin:

passing_ruleset.htm

<!doctype html>
<head>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="cont">
   <h2>Welcome to W3Cschool</h2>
   <p>The largest Tutorials Library on the web.</p>
</div>
</body>
</html>


接下來(lái)，創(chuàng)建文件 style.less

style.less

@detached-ruleset: {
    .mixin() {
        font-family: "Comic Sans MS";
        background-color: #AA86EE;
    }
};

.cont {
    @detached-ruleset();
    .mixin();
}


您可以使用以下命令將 style.less 文件編譯為 style.css : 

lessc style.less style.css


接下來(lái)執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件:

style.css

.cont {
  font-family: "Comic Sans MS";
  background-color: #AA86EE;
}


輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:

  • 將上述html代碼保存在 passing_ruleset.htm 文件中。

  • 在瀏覽器中打開(kāi)此HTML文件，將顯示如下輸出。


輸出


范圍

分離的規(guī)則集中的所有變量和混合宏在被調(diào)用或定義的地方都可用，否則調(diào)用者和定義范圍都可用。 當(dāng)兩個(gè)范圍包含相同的mixin或variable時(shí)，聲明范圍獲取優(yōu)先級(jí)。 分離的規(guī)則集體在聲明范圍中定義。 在將分離的規(guī)則集從一個(gè)變量復(fù)制到另一個(gè)變量后，它不會(huì)更改其范圍。


下表列出了所有類(lèi)型的范圍:

S.N. 類(lèi)型及描述
1 定義和調(diào)用范圍可見(jiàn)性
變量和mixin在分離的規(guī)則集中定義。
2

引用將不會(huì)修改分離的規(guī)則集范圍


僅僅給出引用，規(guī)則集不訪問(wèn)任何新的范圍。
3 解鎖將修改分離的規(guī)則集范圍

分離的規(guī)則集可以通過(guò)導(dǎo)入到范圍中來(lái)訪問(wèn)。
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)