SASS 中的嵌套类答案

【问题标题】：Nested classes in SASSSASS 中的嵌套类
【发布时间】：2014-02-06 08:25:30
【问题描述】：

我有以下代码：

        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 是否有办法实现类似的输出？

【问题讨论】：

你的意思是你想用 SASS 做什么，你用 SCSS 做什么，对吧？

标签： css compass-sass sass

【解决方案1】：

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

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

或者在 SASS 中：

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

【讨论】：

【解决方案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));
  }
}

【讨论】：