SASS中的嵌套类

Question

I have the following code:

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

当菜单项处于活动状态时，active类会应用于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可以实现类似输出的方法？

- Ian Jamieson

---

你的意思是想用SASS来做你之前用SCSS做的事情，对吗？ - BiAiB

Answer 1

SCSS可以使用与CSS相同的语法，而且CSS与SCSS完全兼容。因此您可以使用:

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

或者在SASS中：

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

- Mik

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

- cseelus