3

私は次のコードを持っています：

        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で同様の出力を達成する方法があるかどうか疑問に思いましたか？

4

2 に答える 2

3

SCSSは、CSSと同じ構文を使用できます。さらに、CSSはSCSSと完全に互換性があります。したがって、次を使用できます。

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

またはSASSの場合：

li:hover, li.active a 
  +activestate()
于 2012-05-28T16:16:19.503 に答える
1

または、追加のミックスインを作成せずに：

li {
  /* styles removed for brevity */
  a {
    /* styles removed for brevity */
  }
  &.active a,
  a:hover {
    color:#4f9269;
    @include background-image(linear-gradient(top, #fff, #f0f6f2));
  }
}
于 2014-02-06T00:25:30.530 に答える