css - SASS 中的嵌套类

Question

我有以下代码：

        li {
            a {
                /* style removed for brevity */
                &:hover {   
                    color:#4f9269;
                    @include background-image(linear-gradient(top, #fff, #f0f6f2));
                }
            }
            &.active a {
                color:#4f9269;
                @include background-image(linear-gradient(top, #fff, #f0f6f2));
            }
        }

当菜单项处于活动状态时，活动类将应用于 li，所以我不得不像这样应用 CSS。

我也考虑过写一个mixin：

@mixin activestate() {
    color:#4f9269;
    @include background-image(linear-gradient(top, #fff, #f0f6f2));
}

然后这样做：

        li {
            a {
                /* style removed for brevity */
                &:hover {   
                    activestate();
                }
            }
            &.active a {
                activestate();
            }
        }

通常使用 CSS 我会写这样的东西

li a:hover, li.active a {
    /* active styles here */
}

我想知道 SASS 是否有办法实现类似的输出？

Answer 1

SCSS 可以使用与 CSS 相同的语法。此外，CSS 与 SCSS 完全兼容。所以你可以使用：

li a:hover, li.active a {
   @include activestate();
}

或者在 SASS 中：

li:hover, li.active a 
  +activestate()

Answer 2

或者不编写额外的 mixin：

li {
  /* styles removed for brevity */
  a {
    /* styles removed for brevity */
  }
  &.active a,
  a:hover {
    color:#4f9269;
    @include background-image(linear-gradient(top, #fff, #f0f6f2));
  }
}