it-swarm.com.de

letztes Kind und letzter Typ funktionieren nicht in SASS

Wie würden Sie das so schreiben, dass es SASS-konform ist?

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

Im Grunde repliziere ich gerade dieses Beispiel des Einblendens eines Bildes über einem anderen (hier gefunden.)

Sein JFiddle-Beispiel: http://jsfiddle.net/Xm2Be/3/

Sein Beispiel ist jedoch direktes CSS. Ich arbeite an einem Projekt in SASS und bin mir nicht sicher, wie ich es richtig übersetzen kann.

Mein Code

Beachten Sie in meinem Beispiel unten, dass der Img-Hover nicht richtig funktioniert (beide Bilder werden angezeigt und keine Rollover-Fadein-Aktion)

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

Ich habe es versucht

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

Aber das: wirft SASS-Kompilierfehler, der folgende Code funktioniert

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

Es spuckt jedoch CSS aus, was mir nicht weiterhilft:

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

UPDATE: Arbeitscode:

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

13
Leon Gaban

Schachteln ist bei Sass nicht erforderlich. Fühlen Sie sich nicht dazu verpflichtet, wenn Sie die Selektoren nicht auflösen müssen.

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

Wenn Sie Stile auf das Bild anwenden und dann bestimmte Stile auf den letzten Typ anwenden, würde dies folgendermaßen aussehen, wenn Sie es verschachteln:

.try-me img {
    // styles

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

Keines der oben genannten Dinge funktionierte für mich.

last-of-type spielt nur "Nice" mit Elementen. Sie können Elemente mit beliebigen Klassen auswählen. Dies wird jedoch von den Elementen verarbeitet. Also sagen Sie, Sie haben den folgenden Baum:

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

Um zum letzten div mit der Klasse von middle zu gelangen, funktioniert last-of-type nicht.

Mein Workaround bestand darin, einfach den Elementtyp zu ändern, der somethingelse war

Ich hoffe es hilft jemandem. Ich habe eine Weile gebraucht, um das herauszufinden.

5
WebTim

Hey, warum benutzt du nicht nur CSS? Sie könnten alle JS entfernen, ich meine, der Hover unterstützt die Unterstützung von ie6. Ich vermute, dass Sie wissen, dass es kein Hover-Ereignis gibt, das nur auf Tablets aktiv ist.

Ich meine, Sie müssen einen Bereich für das Bild festlegen. Aber ich finde, es ist voll, vor allem, wenn Sie eine Href wollen.

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

Nur meine Gedanken ..

0
Neil