Die CSS-Verschachtelung macht wieder die Runde. Erinnern Sie sich, Anfang des Jahres, als Adam und Miriam drei Syntaxoptionen zur Abstimmung stellten? Diese Ergebnisse wurden ausgewertet und es war nicht einmal knapp.
Jetzt gibt es noch eine weitere Chance …
Hier ist Kilian Valkhof über CSS-Verschachtelung, die noch nicht in Browsern verfügbar ist, aber bald sein wird. Er merkt jedoch einige Unterschiede zwischen CSS-Verschachtelung und Verschachtelung in Sass oder Less an. Nehmen Sie zum Beispiel den folgenden Code
div 
Wir haben kein „reguläres“ Nesting in CSS. Vielleicht wird das hier eines Tages Realität, oder etwas Ähnliches. Das wäre cool, obwohl dieser Spezifikationsentwurf nichts über Media Queries erwähnt. Ich hoffe, dass wir das direkt von Anfang an bekommen …
Ja, das können Sie, und die Reihenfolge spielt eigentlich keine Rolle. Ein CSS-Präprozessor ist nicht erforderlich. Es funktioniert in normalem CSS.
This works
@supports(--a: b) {
@media (min-width: 1px) {
body {
background: red;
}
}
}Und so …
Ich liebe es, meine @media query Breakpoints zu verschachteln. Das ist für mich vielleicht das wichtigste Feature von Sass. Vielleicht wähle ich eine Methode und mache es so
.element {
display: grid;
grid-template-columns: 100px 1fr;
@include breakpoint(baby-bear) {
display: block;
}
Brad Frost hat neulich danach gefragt…
Sass-Leute, wie macht ihr das und warum? pic.twitter.com/dIBA9BIuCO
— Brad Frost (@brad_frost) 1. Oktober 2018
.c-btn {
&__icon {
...
}
}Ich schätze, das ist technisch gesehen „Nesting“, aber …
Der folgende Text ist ein Gastbeitrag von Filip Naumovic von Salsita Software. Filip hat ein Sass-Tool entwickelt, um bei einem Problem zu helfen, das ich kenne, da ich es viele Male erlebt habe. Du bist glücklich am Verschachteln in Sass. Du bist vielleicht auf einer Ebene oder …
Das & ist ein äußerst nützliches Feature in Sass (und Less). Es wird beim Verschachteln verwendet. Es kann ein schöner Zeitsparer sein, wenn man weiß, wie man es benutzt, oder ein ziemlicher Zeitfresser, wenn man damit kämpft und …
