it-swarm.com.de

Sass Eltern mit kaufmännischem Und (&) mit Typ-Selektoren kombinieren

Ich habe Probleme, in Sass zu nisten. Angenommen, ich habe den folgenden HTML-Code:

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

Wenn ich versuche, meine Stile wie folgt zu verschachteln, wird ein Kompilierungsfehler angezeigt:

.item {
    color: black;
    a& {
        color:blue;
   }
}

Wie verweise ich auf einen Typenselektor vor dem übergeordneten Selektor, wenn er Teil desselben Elements ist?

85
McShaman

Wie Kumar hervorhebt , ist dies seit Sass 3.3.0.rc.1 (Maptastic Maple) möglich.

Die Direktive @ at-root bewirkt, dass eine oder mehrere Regeln im Stammverzeichnis des Dokuments ausgegeben werden, anstatt unter den übergeordneten Selektoren verschachtelt zu werden.

Wir können die @at-root Direktive zusammen mit Interpolation #{} um zum beabsichtigten Ergebnis zu gelangen.

[~ # ~] sass [~ # ~]

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

CSS ausgeben

.item {
    color: black;
}
a.item {
    color: blue;
}
142
Blaine

Die einzige Methode @at-root Löst das Problem nicht, wenn Sie beabsichtigen, den nächstgelegenen Selektor in der Kette zu erweitern. Als Beispiel:

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

Kompiliert zu:

div#id > .element {
    color: blue;
}

Was ist, wenn Sie Ihr Tag mit .element Anstelle von #id Verknüpfen müssen?

Es gibt eine Funktion in Sass namens selector-unify(), die dies löst. Wenn Sie dies mit @at-root Verwenden, ist es möglich, .element Als Ziel festzulegen.

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

Kompiliert zu:

#id > div.element {
    color: blue;
}
26
Ben Fleming

Für den Anfang gibt es (zum Zeitpunkt des Schreibens dieser Antwort) keine Sass-Syntax, die Selektor & verwendet. Wenn Sie so etwas tun möchten, benötigen Sie ein Leerzeichen zwischen dem Selektor und dem kaufmännischen Und. Beispielsweise:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

Die andere Möglichkeit, das kaufmännische Und zu verwenden, ist wahrscheinlich die, nach der Sie (fälschlicherweise) suchen:

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Auf diese Weise können Sie Selektoren mit anderen Klassen, IDs, Pseudo-Selektoren usw. erweitern. Leider würde dies in Ihrem Fall theoretisch zu so etwas wie .itema kompiliert, was offensichtlich nicht funktioniert.

Vielleicht möchten Sie nur überdenken, wie Sie Ihr CSS schreiben. Gibt es ein übergeordnetes Element, das Sie verwenden könnten?

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

Auf diese Weise können Sie Ihren SASS leicht auf folgende Weise schreiben:

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

(Randnotiz: Sie sollten einen Blick auf Ihre HTML werfen. Sie mischen einfache und doppelte Anführungszeichen UND setzen href-Attribute auf p-Tags.)

7
imjared

AFAIK Wenn Sie kaufmännisches Und für Klasse und Tags gleichzeitig kombinieren möchten, müssen Sie diese Syntax verwenden:

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

wird kompilieren zu

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

Andere Verwendungen (wie die Verwendung der Klasse vor @at-root oder mit mehreren @at-roots) führt zu Fehlern.

Hoffe, es wird nützlich sein

4
Vahid

Diese Funktion ist in der neuesten Version von Sass gelandet, 3.3.0.rc.1(Maptastic Maple)

Die beiden eng verwandten Funktionen, die Sie verwenden müssen, sind die skriptfähigen &, das Sie innerhalb eines verschachtelten Stils interpolieren können, um auf übergeordnete Elemente zu verweisen, und das @at-root Direktive, die den unmittelbar folgenden Selektor oder CSS-Block an der Wurzel platziert (es werden keine Eltern in der ausgegebenen CSS enthalten sein)

Siehe hierzu Github-Ausgabe für weitere Einzelheiten

3
kumarharsh