web-dev-qa-db-fra.com

dernier enfant et dernier type ne travaillant pas dans le SASS

Comment écririez-vous cela pour être conforme au SASS?

.fader { display: inline-block; }
.fader img:last-child {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}​

En gros, je ne fais que reproduire cet exemple de fondu dans une image plutôt que dans une autre (trouvé ici.)

Son exemple avec JFiddle: http://jsfiddle.net/Xm2Be/3/

Cependant, son exemple est purement CSS, je travaille sur un projet dans SASS et je ne suis pas sûr de savoir comment le traduire correctement.

Mon code

Notez dans mon exemple ci-dessous, le survol de img ne fonctionne pas correctement (les deux images sont affichées et aucune action de fondu de survol n'est effectuée)

Mon CodePen:http://codepen.io/leongaban/pen/xnjso

J'ai essayé

.try-me img:last-child & .tryme img:last-of-type

Mais le: jette les erreurs de compilation SASS, le code ci-dessous fonctionne

.try-me img last-of-type {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

Cependant, il crache CSS qui ne m'aide pas:

.container .home-content .try-me img last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

MISE À JOUR: Codepen de travail:

http://codepen.io/leongaban/pen/xnjso

csssasscss-selectors
13
Leon Gaban

L'imbrication n'est pas une exigence avec Sass. Ne vous sentez pas obligé de le faire s'il n'est pas nécessaire de séparer les sélecteurs.

.try-me img:last-of-type {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

Si vous appliquez des styles à l'image, puis des styles spécifiques au dernier type, alors voici à quoi cela ressemble quand vous l'imbriquerez:

.try-me img {
    // styles

    &:last-of-type {
        position: absolute;
        top: 0; 
        left: 0;
        display: none;
    }
}
28
cimmanon

Aucune de ce qui précède n'a fonctionné pour moi, donc.

last-of-type ne joue bien qu'avec des éléments, vous pouvez sélectionner des éléments avec des classes à votre guise, mais cela est géré par les éléments. Alors disons que vous avez l'arbre suivant:

<div class="top-level">
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="somethingelse"></div>
</div>

Pour obtenir la dernière division avec la classe middle, ne fonctionne pas avec last-of-type.

Ma solution de contournement consistait simplement à changer le type d’élément que somethingelse était

J'espère que ça aide quelqu'un, ça m'a pris un certain temps pour le comprendre.

5
WebTim

Hey, pourquoi n'utilisez-vous pas que du CSS? Vous pouvez supprimer tous les JS. Je veux dire que le survol est un support qui revient à ie6. J'ai deviné que vous savez qu'il n'y a pas d'événement de survol simplement actif sur les tablettes.

Je veux dire que vous aurez besoin de définir une zone pour l’image .. Mais je trouve l’utilisation complète, surtout si vous voulez un href.

http://codepen.io/Ne-Ne/pen/xlbck

Juste mes pensées ..

0
Neil