LESS - 将规则集传递给 Mixins
描述
分离规则集包含属性、嵌套规则集、变量声明、mixins 等规则集。它存储在变量中并包含在另一个结构中;规则集的所有属性都会复制到该结构中。
示例
以下示例显示如何在 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 TutorialsPoint</h2>
<p>The largest Tutorials Library on the web.</p>
</div>
</body>
</html>
接下来，创建 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
执行上述命令;它将使用以下代码自动创建 style.css 文件 −
style.css
.cont {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
输出
按照以下步骤查看上述代码的工作原理 −
将上述 html 代码保存在 passing_ruleset.htm 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。
范围
分离规则集中的所有变量和混合在规则集调用或定义的地方都可用。否则，默认情况下，调用者和定义范围都可用。当两个范围包含相同的混合或变量时，声明范围优先。分离规则集主体在声明范围内定义。分离规则集从一个变量复制到另一个变量后，其范围不会改变。
下表列出了所有范围类型 −
| Sr.No. | 类型 &描述 |
|---|---|
| 1 | 定义和调用者范围可见性
变量和混合在分离规则集内定义。 |
| 2 | 引用不会修改分离规则集范围
仅提供引用，规则集不会访问任何新范围。 |
| 3 | 解锁将修改分离规则集范围
分离规则集可以通过导入到范围中来访问范围。 |
