css - 使用 Sass 的嵌套元素和连接类

Question

我似乎无法让它工作..我想知道这是否像我想象的那样不可行，或者我现在只是处于大脑煎炸状态..

我有两个 html block ，类分布如下:

<div class="my-class">
  <div class="my-class-parent-one">
    <div class="my-class-wrapper">
      <div class="my-class-child"></div>
      <div class="my-class-child"></div>
    </div>
  </div>
<div>

<div class="my-class">
  <div class="my-class-parent-two">
    <div class="my-class-wrapper">
      <div class="my-class-child"></div>
      <div class="my-class-child"></div>
    </div>
  </div>
<div>

我的 Sass...

.my-class {
  &-parent-one &-wrapper &-cell { font-size: 1.15rem; }
  &-parent-two &-wrapper &-cell { font-size: 0.85rem; }
}

这不应该等同于:??

.my-class .my-class-parent-one .my-class-wrapper .my-class-child {}    
.my-class .my-class-parent-two .my-class-wrapper .my-class-child {}

Answer 1

你的 Sass 将被编译成这样:

.my-class-parent-one .my-class-wrapper .my-class-cell {
  font-size: 1.15rem;
}
.my-class-parent-two .my-class-wrapper .my-class-cell {
  font-size: 0.85rem;
}

请注意，开头不会有.my-class 选择器。要添加 .my-class，您需要更改 Sass:

.my-class {
  & &-parent-one &-wrapper &-cell { font-size: 1.15rem; }
  & &-parent-two &-wrapper &-cell { font-size: 0.85rem; }
}

这里有关于 Sass 中符号的更详细的文本:The Sass Ampersand