是否存在同一类但不同ID的条件声明？

Question

SASS或SCSS中是否有一种用于跟踪HTML元素的条件语句？

<div class="header" id="1">
<div class="header" id="2">

我找到了这个解决方案： Different Styles for same class name but different id

但这似乎是传统的解决方案，我的形象是这样的语法：

.header{
    [if #1]{

   }
   [else if #2]{

   }
}

如果没有这样的语法，我想知道这种实现的关注点是什么？

谢谢！

Answer 1

选择器本身由条件语句组成。由于ID和类在同一元素上，因此按照正常情况使用&连接选择器：

.header{
   &#\1 {
   }

   &#\2 {
   }
}

尽管将ID选择器附加到类选择器可能看起来很奇怪，但它完全有效。 ID选择器不必位于复合选择器的开头，如类型或通用选择器。但是如果它仍然以错误的方式摩擦你，单独使用ID选择器而不用类选择器限定它们是没有错的（除非在其他地方使用不同的ID，在这种情况下你应该重新考虑你的HTML结构）。

另请注意，您需要使用反斜杠转义数字，以便识别ID选择器，因为CSS标识符通常不能以数字开头。