Sass - Can I target multiple label based on it's 'for' entry?-CodePudding

I want these label use same style. How to do it in Sass?

<label for="origin">Origin</label>
<label for="destination">Destination</label>
<label for="date">Date</label>
<label for="train">Train</label>
<label for="dep.">Dep.</label>
<label for="arr.">Arr.</label>
<label for="class">Class</label>
<label for="coach">Coach</label>
<label for="seat">Seat</label>
<label for="price">Price</label>

CodePudding user response：

If you only want to target those for values, you could define a list of the available values and use @each to loop over them to create the CSS you need:

Example, using the first 4 values:

$values: "origin", "destination", "date", "arr.";

@each $for in $values {
    label[data-for="#{$for}"] {
        border: 1px solid red;
    }   
}

Will generate the following CSS:

label[data-for=origin] {
  border: 1px solid red;
}

label[data-for=destination] {
  border: 1px solid red;
}

label[data-for=date] {
  border: 1px solid red;
}

label[data-for="arr."] {
  border: 1px solid red;
}