Moins CSS: & inverse parent avec plusieurs classes?

C'est la première fois que je suis de trouver le & parent sélecteur extrêmement utile, de sorte que je n'ai pas besoin de redéfinir les parents tout simplement de modifier un élément enfant.

Bien sûr, c'est facile avec MOINS, mais je dois demander à!

<div id="skrollr-body" class="nonav">
    <div class="skrollable">

    </div>
</div>


#skroller-body {
    .skrollable {
        margin-top:40px;

        .nonav & {
            //this parent selector lets me modify 
            //.skrollable without duplicating it
            margin-top:0px;

        }
    }
}

La sortie de .nonav & est
.nonav #skroller-body .skrollable

Je me demande si je peux obtenir #skroller-body.nonav .skrollable plutôt sans supplément de balisage HTML (un wrapper div.nonav)?

Actuellement, je vais juste dupliquer le parent

#skrollr-body {
    margin-top:40px;
    left:0;
    width:100%;

    .skrollable {
        margin-top:40px;
        position:fixed;
        z-index:100;
        .skrollable {
            position:absolute;

            .skrollable {
                position:static;
            }
        }
    }
    &.nonav {
            .skrollable {
                 margin-top:0px;
            }
    }
}

Ou pour économiser de sortie redondante;

#skroller-body.nonav .scrollable { margin-top:0px; }

Mais le point ici est le code CSS qui est facile à entretenir et à lire.

OriginalL'auteur Yuji 'Tomita' Tomita | 2012-10-30

  1. 5

    Les docs de nous dire:

    La & opérateur représente le parent sélecteurs de imbriquée à la règle et
    est le plus couramment utilisé lors de l'application d'une modification de la classe ou de la pseudo-classe
    à un sélecteur de

    Donc:

    #skroller-body {
        &.nonav {
            .skrollable {
                //stuff
            }
        }
    }
}
    Oh oui, c'est un bon point, je n'ai pas besoin de dupliquer le contenu parent!

    OriginalL'auteur Matt Ball