SASS：如何申请＆＃39;＆amp;＆＃39;选择器？

Question

例如，我描述了一些类：

.class1 {
  .class2 {
    .class3 {
      // some CSS properties
    }
  }
}

这是DOM结构的一个例子：

<div class="class1">
    <div class="class2">
          <span class="class3">1</span>
          <span class="class3">2</span>
          <a class="class3">3</a>
    </div>
</div>

我想要做的是为a.class3应用特定样式。 类似的东西：

.class1 {
  .class2 {
    .class3 {
      // some CSS properties

      a.& {
        // custom CSS properties for a.class3 within the .class2 within the .class1
      }
    }
  }
}

最好的方法是什么？

Answer 1

我不确定这是否可行。

＆amp;基本上被直到那一点的CSS路径取代（这里：.class1 .class2 .class3）。所以，在你的例子中，你会得到

a..class1 .class2 .class3

由于几个原因，这当然没有意义。

您的问题是您希望在 CSS路径中插入a 。

.class1 .class2 A.class3

那是不可能的。

这可行的唯一方法是给你的a另一个可以附加到路径的类

.class1 {
  .class2 {
    .class3 {
      // some CSS properties

      &.myLink {
        // custom CSS properties for a.class3 within the .class2 within the .class1
      }
    }
  }
}

然后路径将扩展为.class1 .class2 .class3.myLink