Classes imbriquées dans SASS

J'ai le code suivant:

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

Lorsqu'un élément de menu est actif, la classe active est appliquée à la li, donc j'ai dû appliquer le CSS comme ceci.

J'ai aussi consiedered l'écriture d'un mixin:

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

Et puis faire ceci:

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

Normalement avec CSS je voudrais écrire quelque chose comme ceci

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

Je me demandais si il y avait un moyen avec SASS pour atteindre le même résultat?

  • vous voulez dire que vous voulez faire avec SASS, ce que vous faites avec SCSS, droit ?
InformationsquelleAutor Ian Jamieson | 2012-05-28
  1. 2

    SCSS pouvez utiliser la même syntaxe que pour le CSS. En outre, le CSS est entièrement compatible avec SCSS. De sorte que vous pouvez utiliser:

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

    Ou SASS:

    li:hover, li.active a 
  +activestate()
    • Ah ouai, je pense que j'ai eu un gel de cerveau!
    InformationsquelleAutor Mik
  2. 1

    Ou sans l'écriture d'un supplément de 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));
  }
}
    InformationsquelleAutor cseelus