Mit der Entwicklung der Technologie hat sich CSS nun zur dritten Stufe entwickelt. CSS3.css3 kann dynamischere Effekte unterstützen. In der Vergangenheit mussten Animation, Übergang, Berechnung und andere Funktionen mit js implementiert werden Heutzutage können die meisten davon mit CSS implementiert werden und die Leistung ist besser. Natürlich sind beim Schreiben von CSS mit den Anforderungen von Unternehmen CSS-Frameworks wie Sass entstanden, um CSS die Wiederverwendbarkeit, Flexibilität, modulare Entwicklung und eine bessere Verwaltung von Stildateien zu ermöglichen.
CSS-Präprozessor Sass
Sass kann einige Mängel von CSS beheben, einschließlich, aber nicht beschränkt auf:
1. Variable: Deklarieren Sie eine Variable und verwenden Sie sie an mehreren Stellen
$content: "Non-null content";
.main {
content: $content;
}
编译为
.main {
content: "Non-null content”;
}2. Verschachtelung: Kann Eltern und besser klären untergeordnete hierarchische Beziehung, einfach zu ändern und zu suchen und Stilnamen zu reduzieren
.main {
.redbox {
background-color: #ff0000;
color: #000000;
}}
kompiliert in
.main .redbox {
background-color: #ff0000;
color: #000000;}
3. Referenz gemischte Stile: an einer Stelle definiert, verwendet in mehrere Orte
Vorher kompiliert:
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
.box{
@include clearfix
}4. Funktionsanweisungen: Beginnen Sie mit der Programmierung wie js
.box{
display: inline-block;
}
.box:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}Weitere Informationen zur Verwendung finden Sie auf der offiziellen Sass-Website mehr.
Mit dem CSS-Präprozessor können Front-End-Entwickler die Geschwindigkeit der CSS-Entwicklung erheblich verbessern. Ähnlich wie bei Sass gibt es weniger und Stylus.
Lassen Sie uns über einige Probleme sprechen, die bei der Verwendung von Sass auftreten.1 Basierend auf Ruby müssen Sie Ruby installieren, um Sass verwenden zu können. Es wird intern mit Ruby kompiliert.
2. Sie müssen Node-Sass installieren. Wenn Sie Sass verwenden, muss der Webpack-Build installiert werden, und Sass-Loader hängt von Node-Sass ab Sie müssen wissen, dass die Installationsgeschwindigkeit von Node-Sass extrem langsam ist, insbesondere bei der Entwicklung mit dem Windows-System. Wenn npm <5,4 ist, schlägt die Installation von Node-Sass häufig fehl.
3. Kontamination globaler Variablen, wenn Sie einen Selektor definieren, müssen Sie berücksichtigen, ob an anderen Stellen derselbe Name verwendet wird.
4. Statische Kompilierung: Die angezeigte Seite ist das kompilierte CSS.
4. Derzeit im CSS3-Stadium lohnt es sich, auf die zukünftige Entwicklungsrichtung von CSS zu blicken. In Zukunft wird CSS weitere Attribute und Funktionen unterstützen, einschließlich Variablen, Verschachtelung, Wertberechnungen usw.
postcss neue Revolutionpostcss-Definition:
PostCSS ist ein Tool zum Transformieren von CSS mit JS-Plugins. Diese Plugins können Variablen und Mixins unterstützen, zukünftige CSS-Syntax, Inline-Bilder und mehr transpilieren.postcss Vorteile
:1. Unterstützt zukünftiges CSS: Verwenden Sie CSSnext, um zukünftiges CSS zu schreiben (Postcss-CSSnext-Plugin)
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
.sidebar { width: grid-width(5); }
编译为
.sidebar { width: 240px; }Durch CSSnext wird der obige Code in den folgenden Inhalt verarbeitet
:root {
--heading-color: #ff0000;
}
/ custom selectors /
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
/ usage /
:--headings {
color: var(--heading-color);
}2 . PostCSS soll 3-30x schneller sein als Präprozessoren.
3. Umfangreiches Plug-in-System, freie Hände.4.css ist modular und beschränkt den Umfang auf Komponenten, wodurch das Problem des globalen Umfangs vermieden wird.
Postcss ist ein CSS-Postprozessor und kompiliert CSS dynamisch Vorgang beim Kompilieren.
webpack.config.js