使用SASS&指南针,你仍然可以用缩进的后代方式编写,但是添加一个规则/命令,以便将给定的后代写入另一个级别,例如根？
所以这：
- #example-id-1 {
- background: blue:
- #example-id-2 {
- background: red:
- #example-id-3 {
- background: yellow:
- }
- }
- }
通常输出这个：
- #example-id-1 { background: blue: }
- #example-id-1 #example-id-2 { background: red: }
- #example-id-1 #example-id-2 #example-id-3 { background: yellow: }
但是规则可以应用于#example-id-2或#example-id-3,以便输出变为：
- #example-id-1 { background: blue: }
- #example-id-2 { background: red: }
- #example-id-3 { background: yellow: }
非常感谢
解决方法
你在寻找@ at-root：
- #example-id-1 {
- background: blue;
- @at-root #example-id-2 {
- background: red;
- @at-root #example-id-3 {
- background: yellow;
- }
- }
- }
请注意,这是Sass 3.3功能.
