Question

我使用SMACSS编写我的SCSS代码的方法，如果它还有另一个子类，我有一个我要引用的子类。

HTML

<div class="parent-class parent-class-subclass1 parent-class-subclass2">

SCSS

.parent-class {
  &-subclass1.&-subclass2 {
    //Styles here
  }
}

知道我该怎么做吗？

Answer 1

所以，当父元素也有子类1＆amp;＆amp; subclass2，应用样式？

@ katniss.everbean是的，但你写它的方式使得你必须复制代码。

经过一段时间的搜索，我偶然发现了这个解决方案，它可以在第一个＃{＆amp;} 之后编写任何＆amp; 引用完美地运行：

SASS

.parent-class {
  &#{&}-subclass1#{&}-subclass2{
        border: 1px solid red;
  }
}

编译成（CSS）

.parent-class.parent-class-subclass1.parent-class-subclass2 {
  border: 1px solid red;
}

我在SASS GitHub page上找到了它。

Answer 2

...我有一个我要引用的子类，如果它还有另一个子类。

所以，当父元素也有子类1＆amp;＆amp; subclass2，应用样式？

您只需要一个&将嵌套选择器作为兄弟加入父类。然后将两个子类写为常规兄弟选择器（彼此相邻，两者之间没有空格，表明它们都是必需的兄弟类）。

SCSS看起来像这样：

.parent-class {
  //some styles
  &.parent-class-subclass1.parent-class-subclass2 {
    //subclass styles
  }
}

这与以下CSS相同

.parent-class {
  //some styles
}

.parent-class.parent-class-subclass1.parent-class-subclass2 {
  //some other styles
}

要保留模块化命名结构而不必写出整个子类名，可以尝试使用通配符选择器。我不确定它最终看起来不仅仅是写出整个班级名称。

这是一个代码表，用于演示：

http://codepen.io/anon/pen/vXKZYA

该笔的后代基本代码：

<div class="parent-class parent-class-subclass1 parent-class-subclass2">
  some text that has all the goods
</div>

.parent-class {
  color: #0000ff;
  &[class*="-subclass1"][class*="-subclass2"] {
    font-size: 20px;
    font-family: sans-serif;
  }
}

Answer 3

你应该这样做

<div class="parent-class subclass1 subclass2">

.parent-class {
  &.subclass1.subclass2 {
    //Styles here
  }
}

或者你甚至可以这样做

.parent-class {
      &.subclass1 {
        //subclass1 Styles here
        &.subclass2 {
          //subclass1 & 2 Styles here
        }
      }
    }

如何使用SASS在同一元素上引用多个子类

3 个答案: