Question

我试图了解如何让条件语句为LESS工作。我有以下帮助器来帮助定义字体样式。我希望font-size声明是可选的。

.Gotham(@size: false) { 
    letter-spacing: 1px;
    font-family: 'Gotham', Arial, sans-serif; 
    text-transform: uppercase;

    & when (@size) {
        // This doesn't seem to apply
        color: red !important;
        font-size: @size; // Need to append "px"
    }

}

// I want to be able to use it like this:

H1 {
    .Gotham(20);
}
P {
    .Gotham();
}

Answer 1

在Less中，true以外的任何值通常都被视为假，因此20的输入值与& when (@size)后卫不匹配，导致该块永远不会被执行。

以下行是从official Less website：

中提取的

此外，关键字true是唯一的真值。除关键字true之外的任何值都是伪造的

您需要修改您的mixin代码，如下所示：

.Gotham(@size: false) { 
  letter-spacing: 1px;
  font-family: 'Gotham', Arial, sans-serif; 
  text-transform: uppercase;

  & when not (@size = false) {
    color: red !important;
    font-size: unit(@size, px);
  }
}

H1 {
  .Gotham(20);
}
P {
  .Gotham();
}

可以使用内置unit() function将单位附加到数字。此函数采用两个输入参数，其中第一个是必须添加单元的编号，第二个是实际单元。使用此方法，您可以将数字转换为em或px或rem等。

我一直喜欢的另一个选项是真实或错误的比较是检查输入值是否属于所需类型。在这里，由于输入值用于font-size，因此仅当它是一个数字时才有效，因此，也可以使用isnumber() function编写保护：

.Gotham(@size: false) { 
  letter-spacing: 1px;
  font-family: 'Gotham', Arial, sans-serif; 
  text-transform: uppercase;

  & when (isnumber(@size)) { /* enter only when input is a number, false isn't :) */
    color: red !important;
    font-size: unit(@size, px); 
  }
}

H1 {
  .Gotham(20);
}
P {
  .Gotham();
}

了解较少的条件

1 个答案: