减：将字体粗细添加到字体家族变量的最简单方法

Question

I'm working on a system that uses LESS for styling. The variables for the font families look like this:

@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;

Now I have to change the font family to Arial. I'm going to use Arial Narrow for the condensed fonts:

@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;

The problem is, that I can't set the font weight of the two bold font styles that way. I could add "font-weight: bold;" manually to all styles that use one of the bold families, but I would like to avoid that.

Is there a way to tell LESS something like "for all elements: if font-family is set to @font-family-bold or @font-family-condensedbold add font-weight: bold;" or something like that? What would be the most elegant solution?

Thank you in advance.

Answer 1

I fear you'll have to change the markup a little bit after all, but this is a solution i can offer, that might work for you:

@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);
}

What i do here is that i create two mixins that are nested in one another. The inner one is conditional and only "does" something if the passed variable is either @font-family-bold or @font-family-condensedbold .

Here is a Live Example of the code above.

Hopefully this works for you.