Less – 合并(merge)

merge特性允许将多个属性的值聚合为单个属性的值,生成的值以逗号或空格分隔。合并对于背景(background)和转换(transform)之类的属性非常有用。

逗号方式

合并值用逗号分隔。

less代码:

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
} 

编译后的CSS输出:

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

空格方式

合并值用空格分隔。

less代码:

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
} 

编译后的CSS输出:

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

为了避免任何无意的连接,merge需要在每个连接点上使用显式的+或+_标志。



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载