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

Question

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

HTML

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

SCSS

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

知道我该怎么做吗？

Answer 1

你应该这样做

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

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

或者你甚至可以这样做

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

Answer 2

...and I have a subclass that I want to reference if it also has another subclass.

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

您只需要一个 & 即可将嵌套选择器作为同级加入父 class。然后将两个 subclasses 作为常规兄弟选择器编写（彼此相邻，中间没有 space 以表明它们都是必需的兄弟 classes）。

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
}

为了保持您的模块化命名结构而不必写出整个子class 名称，您可以尝试使用通配符选择器。我不确定它实际上最终看起来比只写出整个 class 名称更好。

这是一个演示的codepen：

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

So, when parent element also has subclass1 && subclass2, apply styles?

@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 page 上找到了它。

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

How to reference multiple sub-classes on the same element with SASS

css

sass

smacss

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

How to reference multiple sub-classes on the same element with SASS

css

sass

smacss

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