"Welche CSS-Präprozessorsprache soll ich wählen?"
Was ist ein CSS-Präprozessor?
Der CSS-Präprozessor definiert eine neue Sprache, um CSS einige Programmierfunktionen hinzuzufügen und Dateien zu generieren Verwenden Sie diese Sprache, um CSS zu codieren.
Warum CSS-Präprozessor verwenden?
CSS ist nur eine Auszeichnungssprache. Variablen können nicht angepasst oder in Anführungszeichen gesetzt werden.
CSS weist die folgenden Mängel auf:
Die Syntax ist nicht leistungsfähig genug, sie kann beispielsweise nicht verschachtelt werden, was zu vielen Fehlern führt Das Schreiben ist in der modularen Entwicklung erforderlich.
verfügt über keine Variablen und einen angemessenen Stilwiederverwendungsmechanismus, sodass logisch verwandte Attributwerte wiederholt in Form von Literalen ausgegeben werden müssen. was die Wartung erschwert.
Vorkompilierung kann leicht zum Missbrauch von Nachkommenselektoren führen
Vorteile der Verwendung von Präprozessoren
Bereitstellung eines Mechanismus zur Wiederverwendung von Stilebenen für fehlende CSS-Ebenen
Reduzieren Sie redundanten Code
Verbessern Sie die Wartbarkeit von Stilcodes
Sass&Less
Less (Abkürzung für Leaner Style Sheets) ist eine abwärtskompatible CSS Extended-Sprache. Da Less CSS sehr ähnlich ist, fügt Less der CSS-Sprache nur ein paar praktische Erweiterungen hinzu, was das Erlernen erleichtert.
sass, als „die ausgereifteste, stabilste und leistungsfähigste CSS-Erweiterungssprache auf professionellem Niveau der Welt“. Kompatibel mit allen CSS-Versionen und es gibt unzählige mit Sass erstellte Frameworks wie Compass, Bourbon und Susy.
Das Suffix vor SASS Version 3.0 ist .sass, während das Suffix nach Version 3.0 .scss ist.
Sprachen wie Sass und Less können tatsächlich als Obermengen von CSS verstanden werden. Basierend auf dem ursprünglichen Syntaxformat von CSS fügen sie Funktionen der Programmiersprache hinzu, wie z. B. die Verwendung von Variablen von logischen Anweisungen, Unterstützung, Funktionen usw. Erleichtern Sie die Wartung und Wiederverwendung von CSS-Code.
Aber der Browser erkennt am Ende definitiv nur CSS-Dateien. Er kann die Variablen und logischen Anweisungen in CSS nicht verarbeiten, daher ist ein Kompilierungsprozess erforderlich, um den in Sass oder Less geschriebenen Code in Standard-CSS-Code zu konvertieren Dieser Vorgang wird als CSS-Vorverarbeitung bezeichnet.
Ergänzende Anmerkungen
Ruby Sass
Ruby Sass ist die ursprüngliche Implementierung von Sass, aber es hat Er wird am 26. März 2019 sterben. Wir bieten dafür keinen Support mehr und Ruby Sass-Benutzer werden gebeten, auf eine andere Implementierung (LibSass oder Dart Sass) zu migrieren.
warum?
Anfangs konnte das Schreiben von Sass in Ruby leicht bestehende Benutzer und sogar das gesamte Ruby-Ökosystem dazu bewegen, es zu verwenden.
Später wurde Node.js in der Front-End-Entwicklung allgegenwärtig verschwunden und Ruby tritt in den Hintergrund. Gleichzeitig hat der Umfang des Sass-Projekts die ursprüngliche Vision des Autors bei weitem übertroffen, und die Leistungsanforderungen für Sass haben die Fähigkeiten von Ruby übertroffen.
Dart-Sass
Da ich Sass nicht sehr oft verwende, danke @WashingtonHua für die Erinnerung
sass im November 2016 Die Alpha-Version des Dart Sass 42-Projekts wurde offiziell angekündigt, das heißt, sie haben Sass mit Dart neu geschrieben.
Laut der offiziellen Website von sass-lang:
Dart Sass ist die primäre Implementierung von Sass, was bedeutet, dass es neue Funktionen vor anderen Implementierungen erhält. Es ist schnell, einfach zu installieren und lässt sich zu reinem JavaScript kompilieren, sodass es problemlos in moderne Webentwicklungs-Workflows integriert werden kann.
Die reine JS-Version ist langsamer als die Standalone-Version, lässt sich aber leicht in bestehende Arbeitsabläufe integrieren und ermöglicht die Anpassung von Funktionen und Importern über JavaScript. Fügen Sie es dem Projekt hinzu, indem Sie den Befehl npm install --save-dev sass ausführen und es über require() importieren.
Bei der Installation über npm stellt Dart Sass eine JavaScript-API für die Kompatibilität mit Node Sass bereit. Vollständige Kompatibilität ist in Arbeit
libSass
Sass wurde ursprünglich in Ruby geschrieben. LibSass ist eine in C/C++ implementierte Sass-Engine. Der Kernpunkt ist, dass es einfach, schnell und leicht zu integrieren ist.
LibSass ist nur eine Werkzeugbibliothek. Um es lokal auszuführen (d. h. Sass-Code zu kompilieren), benötigen Sie einen LibSass-Wrapper. Es gibt bereits viele Pakete für LibSass.
Sass C, ein in der C-Sprache entwickeltes Paket
sass.cr ist ein LibSass-Paket für die Programmiersprache Crystal.
go-libsass ist das aktivste Go-Sprachpaket
Einzelheiten finden Sie unter sass.bootcss.com/libsass
Less
Less ist eine CSS-Vorverarbeitungssprache, die die CSS-Sprache erweitert und Variablen, Mixin, Funktionen und andere Funktionen hinzufügt, um die Wartung und Erweiterung von CSS zu vereinfachen .
Less kann auf Node oder im Browser ausgeführt werden. Ein gültiges CSS-Snippet ist selbst ein gültiges LESS-Snippet.
LESS bietet abstrakte Mechanismen, die für die allgemeine Programmierung erforderlich sind, wie Variablen, Verschachtelungen, Mixins, Operatoren und Funktionen.
Variablen
Variablen ermöglichen es uns, eine Reihe gemeinsamer Werte an einer Stelle zu definieren und sie dann im gesamten Stylesheet aufzurufen.
Wenn Sie globale Stilanpassungen vornehmen, müssen Sie möglicherweise nur ein paar Codezeilen ändern.
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}kompiliert zu:
#header {
width: 10px;
height: 20px;
}Mixins
Mixins sind eine Reihe von Eigenschaften, die aus einem Regelsatz (oder Mixin) in einen anderen Regelsatz einbezogen werden. Angenommen, wir definieren eine Klasse wie folgt:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}Wenn Sie diese Attribute in anderen Regelsätzen verwenden möchten, geben Sie einfach den Klassennamen der erforderlichen Attribute wie folgt ein:
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}Verschachtelung
Less bietet die Möglichkeit, Verschachtelung anstelle von oder in Verbindung mit Kaskadierung zu verwenden. Angenommen, wir haben den folgenden CSS-Code:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}In der Less-Sprache können wir den Code wie folgt schreiben:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}Der in Less geschriebene Code ist prägnanter und ahmt die Organisationsstruktur von HTML nach.
Sie können diese Methode auch verwenden, um Pseudo-Selektoren mit Mixins zu verwenden. Hier ist ein klassischer Clearfix-Trick, umgeschrieben als Mixin (& stellt das übergeordnete Element des aktuellen Selektors dar):
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}Operationen
Arithmetische Operatoren +, -, *, / kann mit jeder Zahl, Farbe oder Variable operieren
Beachten Sie, dass bei unterschiedlichen Einheiten der Variablen auf beiden Seiten des Operators vor der Addition, Subtraktion oder dem Vergleich eine Einheitenumrechnung durchgeführt wird. Das berechnete Ergebnis basiert auf dem Einheitentyp des Operanden ganz links. Wenn die Einheitenumrechnung ungültig oder bedeutungslos ist, werden die Einheiten ignoriert. Ungültige Einheitenumrechnungen wie px in cm oder rad in %.
Keine Konvertierung, wenn keine Einheit vorhanden ist
// 所有操作数被转换成相同的单位 @conversion-1: 5cm + 10mm; // 结果是 6cm @conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 结果是 4px // example with variables @base: 5%; @filler: @base * 2; // 结果是 10% @other: @base + @filler; // 结果是 15% 乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。 @base: 2cm * 3mm; // 结果是 6cm 你还可以对颜色进行算术运算： @color: #224488 / 2; //结果是 #112244 background-color: #112244 + #111; // 结果是 #223355
Funktionen
Less verfügt über eine Vielzahl integrierter Funktionen zum Konvertieren von Farben, Verarbeiten von Zeichenfolgen und Arithmetik Operationen usw. Diese Funktionen sind im Less-Funktionshandbuch ausführlich beschrieben.
Die Verwendung der Funktion ist sehr einfach. Das folgende Beispiel zeigt, wie Sie mit der Prozentfunktion 0,5 in 50 % umwandeln, die Farbsättigung um 5 % erhöhen, die Farbhelligkeit um 25 % verringern und den Farbtonwert um 8 erhöhen usw. Verwendung:
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}Importieren (Importieren)
Sie können eine .less-Datei importieren und alle Variablen in dieser Datei können verwendet werden. Wenn die importierte Datei die Erweiterung .less hat, können Sie die Erweiterung weglassen:
@import "library"; // library.less @import "typo.css";
In diesem Artikel wird nur eine kurze Einführung in mehrere Funktionen von less aufgeführt. Eine detailliertere Einführung in weniger finden Sie im Referenzdokument 2 am Ende des Artikels
Sass
Sass ist ein Hilfstool, das CSS erweitert Fügt Variablen hinzu (Variablen, verschachtelte Regeln, Mixins, Inline-Importe und andere erweiterte Funktionen. Diese Erweiterungen machen CSS leistungsfähiger und eleganter.
Funktionen
Voll kompatibel mit CSS3
Variablen basierend auf CSS, Verschachtelung, Mixins hinzufügen und andere Funktionen
Berechnen Sie Farbwerte und Attributwerte durch Funktionen
Bereitstellen von Steueranweisungen (Steueranweisungen) und anderen erweiterten Funktionen
Benutzerdefiniertes Ausgabeformat
Variablen
Sass-Verwendung $-Symbol zur Identifizierung von Variablen (ältere Versionen). von sass verwenden Sie !, um Variablen zu identifizieren.
$highlight-color: #F90;
Variablen können außerhalb von CSS-Regelblöcken definiert werden CSS-Regelblock, die Variable kann nur innerhalb dieses Regelblocks verwendet werden
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}Bei der Deklaration einer Variablen kann sich der Variablenwert auch auf andere Variablen beziehen 🎜>Verschachtelung
Basic Die Verwendung ist die gleiche wie bei less
Unterkombinationsselektor und Kombinationsselektor auf gleicher Ebene: >, + und ~ Diese drei kombinierten Selektoren müssen in Verbindung mit anderen Selektoren verwendet werden, um den Browser anzugeben Diese kombinierten Selektoren können problemlos auf die Regelverschachtelung von Sass angewendet werden. Sie können sie nach dem äußeren Selektor oder vor dem inneren Selektor platzieren:article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }Verschachtelte Attribute;
In sass können zusätzlich zu CSS-Selektoren auch Attribute verschachtelt werdennav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}verwiesen wird.
下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}然后就可以在样式表中通过@include来使用这个混合器。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}less及sass都支持混合器传参，具体内容参见参考文档 2、3
导入SASS文件;
css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。
使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀
使用SASS部分文件
当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。
sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css
默认变量值;
!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。
相同与差异
相同之处：
Less和Sass在语法上有些共性，比如下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
、
目前大部分的实现都是随着前端项目一起打包构建，只在学习或演示的时候才区分使用环境，所以不用在意处理机制，以上只是单纯的对比两者本身。
请不要忘记Dart Sass，它快速，易于安装，并且可以编译为纯JavaScript，从而可以轻松集成到现代Web开发工作流中。
在Less中，仅允许循环数值。
在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能使用递归函数循环数值。
条件语句
Less 中并不支持条件语句，当然，可以通过内置函数 if 以及 and，or，not 这些来模拟条件语句。
在 Sass 中是支持条件语句的，但也不是像其他编程语言直接 if 这样通过保留字来编写，需要加个 @ 符号
框架-
sass框架谁有空可以在评论区补充一下
用哪个？
不知道～
LESS环境较Sass简单
LESS使用较Sass简单，大概？
相对而言，国内前端团队使用LESS的同学会略多于Sass
从功能出发，Sass较LESS略强大一些
Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation
就国外讨论的热度来说，Sass绝对优于LESS
就学习教程来说，Sass的教程要优于LESS(本身来说，less官方文档也够用了)。
Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen Sass und Less. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
