Less合并

时间:2023-03-09 07:51:15
Less合并

合并是LESS的一个特性,它允许通过指定的语法来为某个属性添加使用逗号或空格分隔的值的列表。对于文本阴影、盒阴影、背景、变换等允许使用值的列表的属性,合并非常有用。

合并的语法,就是在属性名称和冒号之间,添加一个 “+” 或 “+_” 标志:

1)当使用 “+” 标志时,列表间以逗号分隔。如:

  1. .mixin() {
  2.   box-shadow +: inset 0 0 10px #555;
  3. }
  4. .myclass {
  5.   .mixin();
  6.   box-shadow +: 0 0 20px black;
  7. }

编译后的CSS代码为:

  1. .myclass {
  2.   box-shadow: inset 0 0 10px #555, 0 0 20px black;
  3. }

2)当使用 “+_” 标志时,列表间以空格分隔。如:

  1. .mixin() {
  2.   transform+_: scale(2);
  3. }
  4. .myclass {
  5.   .mixin();
  6.   transform+_: rotate(15deg);
  7. }

编译后的CSS代码为:

  1. .myclass {
  2.   transform: scale(2) rotate(15deg);
  3. }