使用可选参数减少混合

时间:2013-06-14 19:40:38

标签: css parameters less mixins

我将Less mixin定义为:

.fontStyle(@family, @size, @weight: normal, @style: normal, @color: #ffffff, @letter-spacing: normal) {
  font-family: @family;
  font-size: @size;
  color: @color;
  font-weight: @weight;
  font-style: @style;
 letter-spacing: @letter-spacing;
}

如何定义用法:

.fontStyle('NimbusSansNovCon-Reg', 12px, , , , 0.1em);

即。使用@weight@style@color

的默认值

2 个答案:

答案 0 :(得分:29)

要提供远远低于参数字符串的参数,您还必须提供要定义的预期变量。所以这个:

.fontStyle('NimbusSansNovCon-Reg', 12px, @letter-spacing: 0.1em);

生成此内容(请注意colorfont-weightfont-style如何使用默认设置):

font-family: 'NimbusSansNovCon-Reg';
font-size: 12px;
color: #ffffff;
font-weight: normal;
font-style: normal;
letter-spacing: 0.1em;

答案 1 :(得分:3)

参见文档

http://lesscss.org/features/#mixins-parametric-feature-mixins-with-multiple-parameters

注意:您应该养成使用分号分隔参数的习惯,因为某些css值可以包含逗号。