Question

我正在开发一个使用LESS进行样式化的系统。字体系列的变量如下所示：

@font-family-regular: "robotoregular", sans-serif;
@font-family-bold: "robotobold", sans-serif;
@font-family-condensedregular: "roboto_condensedregular", sans-serif;
@font-family-condensedbold: "roboto_condensedbold", sans-serif;

现在我必须将字体系列更改为Arial。我将使用Arial Narrow作为压缩字体：

@font-family-regular: Arial, sans-serif;
@font-family-bold: Arial, sans-serif;
@font-family-condensedregular: "Arial Narrow", sans-serif;
@font-family-condensedbold: "Arial Narrow", sans-serif;

问题是，我无法通过这种方式设置两种粗体字体样式的字体粗细。我可以添加“font-weight：bold;”手动使用其中一个粗体系列的所有样式，但我想避免这种情况。

有没有办法告诉LESS类似“对于所有元素：如果font-family设置为@ font-family-bold或@ font-family-condensedbold add font-weight：bold;”或类似的东西？什么是最优雅的解决方案？

提前谢谢。

Answer 1

我担心你不得不稍微改变一下标记，但这是我能提供的解决方案，可能对你有用：

@font-family-regular: "robotoregular", sans-serif;
@font-family-bold: "robotobold", sans-serif;
@font-family-condensedregular: "roboto_condensedregular", sans-serif;
@font-family-condensedbold: "roboto_condensedbold", sans-serif;

.font-face-bold (@font-select) when 
    (@font-select = @font-family-bold),
    (@font-select = @font-family-condensedbold) {
  font-weight: bold;
}

.font-face (@size, @font-select) {
    font: @size @font-select;
    .font-face-bold(@font-select);
}


// USAGE
.my-class {
    .font-face(14px, @font-family-regular);
}

.my-bold-class {
    .font-face(14px, @font-family-bold);
}

.my-condensed-class {
  .font-face(14px, @font-family-condensedregular);
}

.my-condensed-bold-class {
  .font-face(14px, @font-family-condensedbold);
}

我在这里做的是创建两个彼此嵌套的mixin。内部变量是有条件的，只有当传递的变量是@font-family-bold或@font-family-condensedbold时才会“做”。

以上是上述代码的Live Example。

希望这适合你。

Less：为font-family变量添加font-weight的最简单方法

1 个答案: