- 语言特点
- Less - 嵌套规则
- Less - 嵌套指令和冒泡
- 减 - 运营
- 少 - 逃避
- 更少 - 函数
- Less - 命名空间和访问器
- 减 - 范围
- 少 - 评论
- 减 - 导入
- 少 - 变量
- 减少 - 扩展
- 更少 - 混合
- Less - 参数混合
- Less - Mixin 作为函数
- Less - 将规则集传递给 Mixins
- 减 - 进口指令
- 更少 - 导入选项
- Less - Mixin 守卫
- 更少 - CSS 守卫
- 更少 - 循环
- 少 - 合并
- Less - 父选择器
- 功能
- Less - 杂项函数
- Less - 字符串函数
- Less - 列表函数
- Less - 数学函数
- Less 类型函数
- Less - 颜色定义函数
- Less - 颜色通道函数
- Less-颜色操作
- Less - 颜色混合函数
- 用法
- Less - 命令行使用
- 在浏览器中减少使用
- 更少 - 浏览器支持
- 更少 - 插件
- Less - 程序化使用
- Less - 在线编译器
- 更少 - GUI
- Less - 编辑器和插件
- Less - 第三方编译器
- 更少 - 框架
- 不太有用的资源
- 更少 - 快速指南
- 较少 - 有用的资源
- 少 - 讨论
LESS - Mixin 守卫
描述
如果您想匹配表达式上的简单值或参数数量,那么您可以使用守卫。它与 mixin 声明相关联,并包含附加到 mixin 的条件。每个 mixin 都会有一个或多个以逗号分隔的守卫;守卫必须括在括号内。LESS 使用受保护的 mixin 而不是if/else语句,并执行计算来指定匹配的 mixin。
下表描述了不同类型的 mixins 防护以及说明。
先生。 | 类型和描述 |
---|---|
1 | 防护比较运算符
您可以使用比较运算符 (=) 来比较数字、字符串、标识符等。 |
2 | 保护逻辑运算符
您可以使用and关键字来解决带有防护的逻辑运算符。 |
3 | 类型检查功能
它包含用于确定匹配 mixin 的值类型的内置函数。 |
4 | 条件混合
LESS 使用默认函数将 mixin 与其他混合匹配进行匹配。 |
例子
以下示例演示了在 LESS 文件中使用 mixin 防护 -
<!doctype html> <head> <title>Mixin Guards</title> <link rel = "stylesheet" href = "style.css" type = "text/css" /> </head> <body> <h2>Example of Mixin Guards</h2> <p class = "class1">Hello World...</p> <p class = "class2">Welcome to Tutorialspoint...</p> </body> </html>
现在,创建style.less文件。
无风格
.mixin (@a) when (lightness(@a) >= 50%) { font-size: 14px; } .mixin (@a) when (lightness(@a) < 50%) { font-size: 16px; } .mixin (@a) { color: @a; } .class1 { .mixin(#FF0000) } .class2 { .mixin(#555) }
您可以使用以下命令将style.less编译为style.css -
lessc style.less style.css
执行上述命令;它将使用以下代码自动创建style.css文件 -
样式.css
.class1 { font-size: 14px; color: #FF0000; } .class2 { font-size: 16px; color: #555; }
输出
按照以下步骤查看上面的代码是如何工作的 -
将以上 html 代码保存在mixin-guard.html文件中。
在浏览器中打开此 HTML 文件,将显示以下输出。