Sass WildCard *选择父母内部的所有ID

Question

我已经看到某个地方可以使用 *与SASS选择ID或类选择器...正确的方法是什么？

例如，我想在父级内选择所有DIV ID。我会想象这样的事情：

<div id="parent">
                <div id="sub1">
                    <div class="icon"></div>
                    <div class="content"></div>
                </div>
                <div id="sub2">
                    <div class="icon"></div>
                    <div class="content"></div>
                </div>
#parent {
   #* {
}}

Answer 1

您只能使用CSS选择器，例如：

#parent {
    div[id] {
      // styles
    }
}

或

#parent {
    div[id^='sub'] {
      // styles
    }
}

Answer 2

如果孩子以有序的方式命名，您可以更轻松地使用@for指令更新：

$num-of-children: 2
@for $i from 1 through $num-of-children
  #sub-#{$i}
    @extend %parent-children
#parent
  %parent-children
    //styles

此外，如果ID更具任意性，则可以将列表传递到@each指令中以实现类似的效果：

$children: sam ramond lemons butter
@each $child in $children
  ##{$child} 
    @extend %parent-children
#parent
  %parent-children
    //styles