Wird CSS3 SCSS wirklich ersetzen?

Beim Styling unserer Webseiten haben wir die Wahl, ob wir in unseren Projekten reines CSS oder SCSS (neben anderen Prozessoren) verwenden möchten. SCSS ist eine Obermenge von CSS. Die meisten Entwickler sind sich einig, dass SCSS aufgrund seiner erweiterten Funktionen und klaren Syntax einfacher zu verwenden ist als CSS.

In diesem Artikel möchte ich die Fähigkeiten von SCSS untersuchen und wie sich CSS im Laufe der Jahre verbessert hat. Darüber hinaus werde ich bewerten, ob CSS in realen Projekten als Ersatz für SCSS verwendet werden kann.

Aktuelle CSS-Funktionalität

CSS hat seit seiner Einführung einen langen Weg zurückgelegt. Durch die Entwicklung von CSS in den letzten Jahren ist auch der Einsatz von JavaScript im Bereich der Animation weniger notwendig geworden. Moderne Browser nutzen sogar die GPU, um die Leistung dieser CSS-Animationen zu verbessern. Mit nur wenig Einarbeitung können wir jetzt sogar komplexe responsive Rasterlayouts mit CSS erstellen.

Heutzutage gibt es in CSS viele neue Funktionen, dieser Artikel konzentriert sich jedoch auf einige der neuen Funktionen, die in modernen Webanwendungen häufig verwendet werden.

• Beim Erstellen einer Webanwendung ist das Layout der Seite der wichtigste Teil. Die meisten von uns haben sich jahrelang auf CSS-Frameworks wie Bootstrap verlassen, aber CSS bietet jetzt neue Funktionen wie Grid, Subgrid, Flexbox usw., um Layouts nativ zu erstellen. Während Flexbox unter Entwicklern sehr beliebt ist, holt das Grid-Layout auf.
• Flexibles Textlayout
• Dank der leistungsstarken Funktionen von Transition und Transform müssen wir zum Erstellen von Animationen kein JavaScript mehr verwenden.
• Benutzerdefinierte Eigenschaften oder Variablen

Funktionen von SCSS

SCSS unterstützt die Verwendung von Variablen und vermeidet so redundanten Code

Wir können tatsächlich eine Reihe von color oder anderen Elementdefinitionen (wie etwa font ) in unseren Stylesheets wiederverwenden. Um diese wiederverwendbaren Dinge an einem einheitlichen Ort zu deklarieren, stellt uns SCSS die Variablenfunktion zur Verfügung, die es uns ermöglicht, einen Variablennamen zur Darstellung einer bestimmten Farbe zu verwenden und den Variablennamen an anderen Stellen im Projekt zu verwenden, anstatt den Farbwert neu zu schreiben.

Beispielsweise das folgende Beispiel:

$schwarz: #000000;
$primary-font: „Ubuntu“, „Helvetica“, serifenlos;
$Einheit: 1rem;

Körper {
    Farbe: $schwarz;
    Schriftfamilie: $primary-font;
    Polsterung: #{$unit * 2};
}

CSS unterstützt auch Variablen und benutzerdefinierte Eigenschaften. Die folgenden sind benutzerdefinierte Eigenschaften in CSS:

--schwarz: #000000;
--Breite: 800px;
--primaryFont: „Ubuntu“, „Helvetica“, serifenlos;

Körper {
    Breite: var(--width);
    Farbe: var(--schwarz);
    Schriftfamilie: var(--primaryFont);
}

Allerdings sind benutzerdefinierte CSS-Eigenschaften zur Laufzeit zeitaufwändiger als SCSS-Variablen.

Dies liegt daran, dass der Browser diese Attribute zur Laufzeit verarbeitet. SCSS hingegen wird während der Vorverarbeitungsphase in CSS konvertiert und verarbeitet Variablen. Daher ist die Verwendung von Variablen und die Wiederverwendung von Code in SCSS leistungsfähiger als bei CSS.

SCSS ermöglicht verschachtelte Syntax – prägnanterer Quellcode

Angenommen, es gibt einen CSS-Codeblock wie diesen:

.header {
    Polsterung: 1rem;
    Rahmen unten: 1px durchgehend grau;
}

.header .nav {
    Listenstil: keiner;
}

.header .nav li {
    Anzeige: Inline-Flex;
}

.header .nav li a {
    Anzeige: Flex;
    Polsterung: 0,5rem;
    Farbe: rot;
}

Der obige Code sieht verwirrend aus, da wir dasselbe übergeordnete Element wiederholt deklarieren müssen, um den untergeordneten Elementen Stile hinzuzufügen.

Wenn wir jedoch die verschachtelte Syntax von SCSS verwenden, können wir prägnanteren Code schreiben. Wenn der obige Code in SCSS geschrieben wird, sieht er folgendermaßen aus:

.header {
    Polsterung: 1rem;
    Rahmen unten: 1px durchgehend grau;

    .nav {
        Listenstil: keiner;

        li {
            Anzeige: Inline-Flex;

            A {
                Anzeige: Flex;
                Polsterung: 0,5rem;
                Farbe: rot;
            }
        }
    }
}

Daher erscheint das Entwerfen von Komponenten mit SCSS im Vergleich zu herkömmlichem CSS eleganter und prägnanter.

@extend-Funktionalität – vermeiden Sie die Wiederholung derselben Stile!

In SCSS können wir @extend verwenden, um die gleiche Eigenschaft für verschiedene Selektoren freizugeben. Die Verwendung von @extend mit Platzhaltern ist wie folgt:

%ungestylte Liste {
    Listenstil: keiner;
    Rand: 0;
    Polsterung: 0;
}

%unstyled-list ist eine Syntaxvereinfachung, die das wiederholte Schreiben von Code vermeiden kann. Wir können diese Listenstilvorlage an verschiedenen Stellen verwenden, zum Beispiel:

.Suchergebnisse {
    @erweitern %ungestylte Liste;
}

.Anzeigen {
    @erweitern Sie %unstyled-list;
}

.Armaturenbrett {
    @erweitern Sie %unstyled-list;
}

Ebenso können wir diese Definition in allen Stylesheets wiederverwenden, die sie importieren.

SCSS verfügt außerdem über viele Funktionen wie Funktionen, Mixins und Schleifen, die unsere Front-End-Entwicklung effizienter machen können.

Soll ich von SCSS zu CSS wechseln?

Oben haben wir die derzeit von CSS bereitgestellte Funktionalität und die Fähigkeiten von SCSS untersucht. Wenn wir jedoch CSS mit SCSS vergleichen, werden wir feststellen, dass es einige notwendige Funktionen gibt, die in CSS nicht verfügbar sind.

• Da Web-Anwendungen ständig wachsen, werden Stylesheets immer komplexer und größer. Die Verschachtelungsfunktion von CSS verbessert die Lesbarkeit des Codes erheblich und erleichtert uns die Entwicklung solcher Projekte. Zum Zeitpunkt der Erstellung dieses Artikels unterstützt CSS diese Funktion jedoch noch nicht.
• CSS kann keine Flusssteuerungsregeln verarbeiten. SCSS bietet integrierte Flusssteuerungsregeln wie @if , @else , @each , for und @while . Als Programmierer finde ich diese Funktion zum Definieren von Stilen sehr nützlich. Dies ermöglicht es uns auch, weniger und prägnanteren Code zu schreiben.
• Darüber hinaus unterstützt SCSS den Standardsatz numerischer Operatoren, während wir in CSS die Funktion calc() verwenden müssen, um numerische Berechnungen durchzuführen. Mit numerischen Operationen von SCSS können auch automatisch zwischen kompatiblen Einheiten konvertiert werden.

Allerdings unterliegt die CSS-Funktion calc() einigen Einschränkungen. Beispielsweise muss der Divisor bei einer Division eine Zahl sein, und bei einer Multiplikation muss mindestens ein Argument eine Zahl sein.

• Ein weiterer wichtiger Aspekt ist die Wiederverwendung von Stilen, das „Killerfeature“ von SCSS. In dieser Hinsicht bietet SCSS viele Funktionen wie integrierte Module, Zuordnungen, Schleifen und Variablen.

Daher bin ich der Meinung, dass SCSS trotz der Vielzahl neuer Funktionen von CSS immer noch die bessere Wahl ist. Teilen Sie uns Ihre Meinung unten in den Kommentaren mit.

Dies ist das Ende dieses Artikels darüber, ob CSS3 SCSS wirklich ersetzen wird. Weitere Informationen dazu, ob CSS3 SCSS ersetzen wird, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!