使用 & 运算符时，少父项不应用于子项

Question

    .text1 {
        font-weight: normal;
        font-family: cursive;
        color: green !important;
    
        &-xxs {
            font-size: smaller;
        }
    
        &-sm {
            font-size: small;
        }
    
        &-md {
            font-size: medium;
        }
    
        &-lg {
            font-size: large;
        }
    } 

<div class="text1-sm">  

没有

text1

属性。 当使用

sm

作为类名时，我希望除了

text1-sm

的属性之外还应用 text1 的属性

Answer 1

CSS 不是这样工作的。

text1

和

text1-xss

是不同的类名。

选择器

.text1

根本不与带有

class="text1-xss"

的元素匹配。

---

您可以为元素指定两个类：

class="text1 text1-xss"

---

您可以将 CSS 设计为首先使用两个不同的类：

.text1 {
  font-weight: normal;
  font-family: cursive;
  color: green !important;
}

.xss {
  font-size: smaller;
}  

与

class="text1 xss"

。

---

您可以使用 mixin 将共享规则复制到每个类选择器规则集中。