css - 如何使用 SASS 引用同一元素上的多个子类

Question

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

HTML

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

SCSS

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

知道我该怎么做吗？

Answer 1

那么，当父元素也有 subclass1 && subclass2 时，应用样式？

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

在搜索了一段时间后，我偶然发现了这个解决方案，它可以通过在第一个类似#{&}之后编写任何&引用来完美地工作：

SASS

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

编译成 (CSS)

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

我在SASS GitHub 页面上找到了它。

Answer 2

...并且我有一个子类，如果它还有另一个子类，我想引用它。

那么，当父元素也有 subclass1 && 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
        }
      }
    }