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 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));
  }
}

SASS中的嵌套类

2 个答案: