- 语言特性
- Less - 嵌套规则
- Less - 嵌套指令和冒泡
- Less - 操作
- Less - 转义
- Less - 函数
- Less - 命名空间和访问器
- Less - 作用域
- Less - 注释
- Less - 导入
- Less - 变量
- Less - 扩展
- Less - Mixin
- Less - 参数化 Mixin
- Less - Mixin 作为函数
- Less - 将规则集传递给 Mixin
- Less - 导入指令
- Less - 导入选项
- Less - Mixin 保护
- Less - CSS 保护
- Less - 循环
- Less - 合并
- Less - 父选择器
- 函数
- Less - 杂项函数
- Less - 字符串函数
- Less - 列表函数
- Less - 数学函数
- Less - 类型函数
- Less - 颜色定义函数
- Less - 颜色通道函数
- Less - 颜色操作
- Less - 颜色混合函数
- 用法
- Less - 命令行用法
- 在浏览器中使用 Less
- Less - 浏览器支持
- Less - 插件
- Less - 程序化用法
- Less - 在线编译器
- Less - GUI
- Less - 编辑器和插件
- Less - 第三方编译器
- Less - 框架
- Less 有用资源
- Less - 快速指南
- Less - 有用资源
- Less - 讨论
LESS - 合并逗号
描述
它将属性值添加到最后。
示例
以下示例演示了在 LESS 文件中使用合并逗号功能:
<!doctype html> <head> <title>Merge Comma</title> <link rel = "stylesheet" href = "style.css" type = "text/css" /> </head> <body> <h2>Example of Merge Comma</h2> <p class = "class">Hello World!!!Welcome to Tutorialspoint...</p> </body> </html>
接下来,创建style.less文件。
style.less
.myfunc() { box-shadow+: 5px 5px 5px grey; } .class { .myfunc(); box-shadow+: 0 0 5px #f78181; }
您可以使用以下命令将style.less编译为style.css:
lessc style.less style.css
执行上述命令;它将自动创建包含以下代码的style.css文件:
style.css
.class { box-shadow: 5px 5px 5px grey, 0 0 5px #f78181; }
输出
按照以下步骤查看上述代码的工作原理:
将上述 html 代码保存在merge_comma.html文件中。
在浏览器中打开此 HTML 文件,将显示以下输出。
less_merge.htm
广告