Sass

Question

我希望这些标签使用相同的样式。如何在 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>

Answer 1

如果您只想定位那些 for 值，您可以定义一个可用值列表并使用 @each 循环它们以创建您需要的 CSS：

示例，使用前 4 个值：

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

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

将生成以下 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;
}

Sass - 我可以根据它的 'for' 条目定位多个标签吗？

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

html