SASS适用于将选择器添加到元素

Question

如何将#demo元素应用于我的actions元素？ 我尝试了这段代码，但它不起作用，我找不到合适的语法。

功能：

=actions($element)
    #{element}:hover
        opacity: 0.8

    #{element}:active
        opacity: 0.4

元素：

#demo
    backgroud: red

    +actions(&)

这应该编译成这样的东西：

#demo
    background:red

#demo:hover
    opacity: 0.8

#demo:active
    opacity: 0.4

Answer 1

你做的第一个错误是在插值过程中，你错过了$

你写了#{element}:hover而不是#{$element}:hover

这是你的功能应该是什么样的

=actions($element)
  @at-root
    #{$element}:hover
      opacity: 0.8

    #{$element}:active
      opacity: 0.4

#demo
  backgroud: red
  +actions(&)

编译为以下css

#demo {
  backgroud: red;
}
#demo:hover {
  opacity: 0.8;
}
#demo:active {
  opacity: 0.4;
}

如果没有@at-root指令，你最终会得到看起来像这样的css

#demo #demo:hover {
  opacity: 0.8;
}