- 语言特性
- 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
广告