sass - SASS 通配符 * 选择父项中的所有 id

Question

我在某处看到了使用 * 作为 SASS 的 ID 或类选择器的能力......这样做的正确方法是什么？

例如，我想选择父 div 中的所有 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