SASS list and style name

[RachelR]

Hi all

I’m using font-feature-settings to access a font Opentype features.

I’m using a SASS list to create the css from the opentype tags like

$feats: "tnum", "onum", ("onum", "tnum");
@each $feat in $feats{
  .#{$feat}{
    font-feature-settings: $feat;
    -webkit-font-feature-settings: $feat;
    -moz-font-feature-settings: $feat;
  }
}

// Output css
.tnum {
  font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  -moz-font-feature-settings: "tnum";
}

.onum {
  font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  -moz-font-feature-settings: "onum";
}

.onum, tnum {
  font-feature-settings: "onum", "tnum";
  -webkit-font-feature-settings: "onum", "tnum";
  -moz-font-feature-settings: "onum", "tnum";
}

This works but my problem is the last block where I’m creating the onum, tnum class.
The css produced is fine the I need to change the css class. Here it is .onum, tnum but needs to be something like .onum-tnum

How can I create a class name like .onum-tnum from this list

[Erik_J]

@RachelR

Here it is .onum, tnum but needs to be something like .onum-tnum

If I guess correctly what you’re asking for.

If two (or more) classes are names of the same element, you can make a selector of the double (or more) weight by combining them without a space between, like:

<div class="onum tnum xnum">...</div>

.onum.tnum {...} /* double class weight (20) */
.onum.tnum.xnum {...} /* tripple class weight (30) */

The first selector targets only elements that have both classes.

So I guess the “onum-tnum” would be “onum tnum”?