Nested classes in 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));
            }
        }

When a menu item is active the active class is applied to the li, so I have had to apply the CSS like this.

I have also consiedered writing a mixin:

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

And then doing this:

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

Normally with CSS I would write something like this

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

I was wondering if there was a way with SASS to achieve similar output?

Solution 1

SCSS can use the same syntax as the CSS. Moreover, CSS is fully compatible with SCSS. So you can use:

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

Or in SASS:

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

Solution 2

Or without writing an extra 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));
  }
}

Comments

[BiAiB]

you mean you want to do with SASS, what you do with SCSS, right ?