1

可选参数可以在 LESS 中@font-file获取值吗?@font-name没有任何 javascript 评估...

.font-face(@font-name, @font-file: ???) {
    font-family: '@{font-name}';
    src: url('fonts/@{font-file}.eot');
    src: url('fonts/@{font-file}.eot?#iefix') format('embedded-opentype'),
         url('fonts/@{font-file}.svg#@{font-file}') format('svg'),
         url('fonts/@{font-file}.woff') format('woff'),
         url('fonts/@{font-file}.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

抱歉,如果这是一个很无聊的问题,我现在已经用 LESS 花了大约 2 个小时 :)

编辑:不复制mixin:

.font-face(@font-file) {
    .font-face(@font-file, @font-file)
}

.font-face(@font-name, @font-file) {
  font-family: '@{font-name}';
  src: url('fonts/@{font-file}.eot');
  src: url('fonts/@{font-file}.eot?#iefix') format('embedded-opentype'),
  url('fonts/@{font-file}.svg#@{font-file}') format('svg'),
  url('fonts/@{font-file}.woff') format('woff'),
  url('fonts/@{font-file}.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
4

2 回答 2

1

据我所知,答案是“不”。LESS 仅使用模式匹配和保护表达式来执行此类评估,因此无法执行另一种可能用于设置font-file名称的“if”条件。

根据LESS,您的“重复”混合并不是真正的“重复”,因为一个匹配只传递一个变量的模式,而另一个匹配传递两个变量的模式。因此,您的解决方案是实现您想要的正确(并且可能是最优雅)的方式。

于 2012-12-17T02:59:28.583 回答
0

您实际上可以在声明中提供默认值:

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

然后在有或没有额外参数的情况下使用它:

#header {
  .border-radius;
}

见: http: //lesscss.org/features/#mixins-parametric-feature

于 2014-05-23T17:22:10.633 回答