html - Less:将字体粗细添加到字体系列变量的最简单方法

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;

问题是，我无法通过这种方式设置两种粗体样式的字体粗细。我可以添加“字体粗细:粗体；”手动添加到所有使用粗体系列之一的样式，但我想避免这种情况。

有没有办法告诉 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);
}

我在这里所做的是创建两个相互嵌套的混入。内部变量是有条件的，只有当传递的变量是 @font-family-bold 或 @font-family-condensedbold 时才会“做”某事。

这是一个Live Example上面的代码。

希望这对你有用。