圣诞树动画

Question

kizoso

Asked:2020-06-26 17:41:01 +0000 UTC2020-06-26 17:41:01 +0000 UTC 2020-06-26 17:41:01 +0000 UTC

单个选择器的 Scss 嵌套规则

是否可以在 scss(sass) 中为单个选择器创建嵌套规则。在 scss 中，可以使用 parent 前缀为子项和名称编写样式&，但我需要在附件中添加一个外部选择器。例如代码：

.one{
  .two,
  &_1,
  &_other{
    color: red;
  }
}

将编译为：

.one .two,
.one_1,
.one_other{
    color: red;
}

是否可以在.one{}内部放置某种外部选择器以使结果没有父级？例如，我想写一些类似的东西：

.one{
  .two,
  &_1,
  &_other,
  '/какой-то префикс, поднимающий на уровень вверх/'.class{
    color: red;
  }
}

并获取此代码：

.one .two,
.one_1,
.one_other,
.class{
    color: red;
}

user192664 · Answer 1 · 2020-06-26T18:24:34Z

Best Answer

user192664

从 3.4 版开始就可以做到这一点Sass。

使用@at-root.

萨斯：

.one{
   @at-root .two#{&},
  &_1,
  &_other{
    color: red;
  }
}

CSS：

.two.one, .one_1, .one_other {
  color: red;
}

萨斯：

.one{
   @at-root #{&}.two,
  &_1,
  &_other{
    color: red;
  }
}

CSS：

.one.two, .one_1, .one_other {
  color: red;
}

文案：

.one{
  @at-root .class {
    color: red;
  }
}

CSS：

.class {
  color: red;
}