Was ist ein CSS-Präprozessor?

Der CSS-Präprozessor ist eine spezielle Programmiersprache, mit der CSS einige Programmierfunktionen hinzugefügt werden (CSS selbst ist keine Programmiersprache). Es besteht keine Notwendigkeit, Browserkompatibilitätsprobleme zu berücksichtigen, da der CSS-Präprozessor letztendlich Standard-CSS-Stile kompiliert und ausgibt. Sie können grundlegende Programmierkenntnisse wie Variablen, einfache logische Urteile und Funktionen im CSS-Präprozessor verwenden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

CSS (Cascading Style Sheet) wird als Cascading Style Sheet übersetzt. Dieser Fachbegriff ist in der Branche nicht unbekannt. Er wird hauptsächlich für das Design von Webseiten verwendet . Durch die Einrichtung eines Stylesheets können Sie die Anzeigeattribute jedes Tags in HTML (XHTML) einheitlich steuern. Es ermöglicht Benutzern, das Erscheinungsbild von Webseiten (oder Webanwendungen) effektiver zu steuern, die Position und das Erscheinungsbild von Webelementen genau festzulegen und Spezialeffekte zu erstellen. CSS bietet die Möglichkeit, Webseitenobjekt- und Modellstile zu bearbeiten und ein vorläufiges interaktives Design durchzuführen. Es ist derzeit die leistungsstärkste Designsprache basierend auf der Textanzeige. CSS kann die Schreibmethode entsprechend der Verständnisfähigkeit verschiedener Benutzer vereinfachen oder optimieren und sie so für alle Arten von Menschen gut lesbar machen.

Was CSS selbst betrifft, ist es für die meisten Web-Frontend-Praktiker kein Problem. Jeder, der CSS studiert hat, weiß, dass es keine Programmiersprache ist. Sie können damit Webseitenstile entwickeln, aber nicht zum Programmieren. Mit anderen Worten: CSS ist im Grunde ein Designer-Tool und kein Programmierer-Tool. In den Augen von Programmierern bereitet CSS im Gegensatz zu anderen Programmiersprachen wie PHP, Javascript usw. eigene Variablen, Konstanten, bedingte Anweisungen und einige Programmiersyntaxen Das Schreiben ist ziemlich zeitaufwändig und der Code ist schwierig zu organisieren und zu warten.

Natürlich fragten sich einige Leute, ob einige Programmierelemente wie andere Programmiersprachen zu CSS hinzugefügt werden könnten, sodass CSS wie andere Programmiersprachen eine vorgegebene Verarbeitung durchführen könnte. Auf diese Weise gibt es einen „CSS-Präprozessor“.

1. Was ist ein CSS-Präprozessor? Die Grundidee besteht darin, eine spezielle Programmiersprache zu verwenden, um die Datei als Ziel zu generieren muss diese Sprache zum Codieren verwenden. Laienhaft ausgedrückt verwendet der CSS-Präprozessor eine spezielle Programmiersprache, um Webseitenstile zu entwerfen, und kompiliert sie dann in normale CSS-Dateien für die Projektverwendung. Der CSS-Präprozessor fügt CSS einige Programmierfunktionen hinzu, ohne dass Probleme mit der Browserkompatibilität berücksichtigt werden müssen. Sie können beispielsweise Variablen, einfache Logikprogramme, Funktionen usw. in CSS verwenden prägnanter, anpassungsfähiger, besser lesbar, einfacher zu warten und viele andere Vorteile.

Die CSS-Präprozessortechnologie ist sehr ausgereift und es sind viele verschiedene CSS-Präprozessorsprachen entstanden, wie zum Beispiel: Sass (SCSS), LESS, Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS usw. . Es gibt so viele CSS-Präprozessoren, dass „Welchen CSS-Präprozessor soll ich wählen?“ in letzter Zeit zu einem heißen Thema im Internet geworden ist. Auf LinkedIn, Twitter, CSS-Trick, Zhihu und den wichtigsten technischen Foren streiten sich viele Leute darüber. Dies ist ein großer Fortschritt gegenüber der Frage, ob wir CSS-Präprozessoren verwenden sollten.

Unter den vielen hervorragenden CSS-Präprozessorsprachen sind bisher Sass, LESS und Stylus die besten, mit vielen Diskussionen und Vergleichen. In diesem Artikel werden Ihnen diese drei CSS-Präprozessorsprachen anhand ihres Hintergrunds, ihrer Installation, ihrer Verwendungssyntax, ihrer Unterschiede und anderer Vergleiche vorgestellt. Ich glaube, dass Front-End-Entwicklungsingenieure ihre eigene Wahl treffen werden – welchen CSS-Präprozessor soll ich wählen?

(Lernvideo-Sharing:

CSS-Video-Tutorial

)

2. Hintergrundeinführung in Sass, LESS und Stylus

Um diese drei beliebten CSS-Präprozessoren besser zu verstehen, beginnen wir mit ihrem Hintergrund. Erfahren Sie einfach mehr über ihre Hintergrundinformationen .

1. Einführung in den Sass-Hintergrund

Sass ist eine Erweiterung der CSS-Syntax (Cascading Style Sheets). Es ist die früheste und ausgereifteste CSS-Präprozessorsprache. Durch Verschachtelung, Mix-Ins, Funktionen und andere Funktionen kann CSS effizienter und flexibler geschrieben werden. Sass wird schließlich legales CSS für den Browser kompilieren, was bedeutet, dass seine eigene Syntax für den Browser nicht leicht zu erkennen ist, da es sich nicht um ein Standard-CSS-Format handelt und dynamische Variablen innerhalb seiner Syntax verwendet werden können. Es ist mehr wie eine sehr einfache dynamische Sprache.

Tatsächlich verfügt Sass jetzt über zwei Sätze grammatikalischer Regeln: Einer verwendet weiterhin Einrückungen als Trennzeichen, um Codeblöcke zu unterscheiden; der andere Satz von Regeln verwendet geschweifte Klammern ({}) als Trennzeichen wie CSS. Die letztgenannte Grammatikregel wird auch SCSS genannt und wird von Versionen nach Sass3 unterstützt.

Hinweis: Offizielle Website-Adresse von Sass: http://sass-lang.com

2. Hintergrundeinführung in LESS

Ein Open-Source-Projekt aus dem Jahr 2009. Es ist stark von Sass beeinflusst, verwendet aber auch CSS-Syntax, um den meisten Entwicklern und Designern den Einstieg zu erleichtern. LESS bietet eine Vielzahl von Möglichkeiten, geschriebenen Code reibungslos in Standard-CSS-Code umzuwandeln. LESS ist häufig in vielen gängigen Frameworks und Tools zu finden (z. B. verwendet das Bootstrap-Framework von Twitter LESS).

Laut der Einleitung auf Wikipedia ist LESS eigentlich ein Open-Source-Projekt, das von Alexis Sellier unter dem Einfluss von Sass erstellt wurde. Zu dieser Zeit verwendete SASS Einrückungen als Trennzeichen zur Unterscheidung von Codeblöcken anstelle der in CSS weit verbreiteten geschweiften Klammern ({}). Um es für bestehende CSS-Benutzer komfortabler zu machen, hat Alexis LESS entwickelt und CSS-ähnliche Schreibfunktionen bereitgestellt.

Hinweis: Die offizielle Website von LESS: http://lesscss.org

3. Einführung in den Stylus-Hintergrund

Stylus stammt aus der Node.js-Community und wird hauptsächlich zur Unterstützung der CSS-Vorverarbeitung verwendet Für Node-Projekte gibt es in dieser Community bestimmte Unterstützer, aber im weitesten Sinne ist ihre Popularität nicht so gut wie die von Sass und LESS.

Stylus ist als revolutionäre neue Sprache bekannt, die eine effiziente, dynamische und ausdrucksstarke Möglichkeit bietet, CSS für die Verwendung durch Browser zu generieren. Stylus unterstützt sowohl Einrückungen als auch CSS-Schreibregeln im regulären Stil.

Hinweis: Offizielle Website von Stylus: http://learnboost.github.com/stylus

3. Grammatik von Sass, LESS und Stylus

Jede Sprache hat ihre eigenen bestimmten Grammatikregeln, die CSS-Präprozessorsprache ist keine Ausnahme Vor der tatsächlichen Verwendung der CSS-Präprozessorsprache gibt es einen weiteren unverzichtbaren Wissenspunkt, nämlich das Verständnis der Syntax. Glücklicherweise sind die Syntax und die CSS-Syntax dieser drei CSS-Präprozessorsprachen ähnlich.

1. Sass-Syntax

Sass Version 3.0 beginnt mit der Verwendung der Standard-CSS-Syntax, die mit SCSS identisch sein kann. Dies erleichtert die Konvertierung von Sass-Code in CSS-Code. Standardmäßig verwendet Sass die Erweiterung „.scss“. Sass-Syntaxregeln können wie CSS geschrieben werden:

/*style.sass新版语法规则*/
h1{
  color:#936;
  background-color:#333;
}

Wie Sie sehen, kann solcher Code im Sass-Stil nicht einfacher sein.

Der wichtige Punkt ist, dass Sass auch die alte Syntax unterstützt. Die alte Syntax unterscheidet sich geringfügig von der regulären CSS-Syntax. Alle Einrückungs- und Zeichenfehler führen zu Stilkompilierungsfehlern. Sass kann geschweifte Klammern (｛｝) und Semikolons (;) weglassen und setzt ausschließlich auf strikte Einrückung und Formatierung des Codes. Die Datei verwendet die Erweiterung „.sass“ und ähnelt der Syntax

/*style.sass*/
h1
  color:#936
  background-color: #333

2.LESS

LESS ist eine erweiterte Form von CSS. Es entmannt nicht die Funktionen von CSS, sondern fügt der bestehenden CSS-Syntax viele zusätzliche Funktionen hinzu. In Bezug auf die Syntaxregeln verwendet LESS wie Sass die Standardsyntax von CSS, mit der Ausnahme, dass die Erweiterung der Quelldatei von LESS „.less“ lautet und die grundlegende Syntax der folgenden ähnelt:

/*style.less*/
h1 {
  color: #963;
  background-color: #333;
}

3.Stylus-Syntax

Stylus verfügt über weitere Syntaxtricks. Stylus akzeptiert auch die Standard-CSS-Syntax, verwendet aber auch die Einrückungssteuerung wie die alten Syntaxregeln von Sass. Gleichzeitig akzeptiert Stylus auch ohne geschweifte Klammern (｛). ｝) und Semikolon-Syntax lautet wie folgt:

/*style.styl*/
/*类似于CSS标准语法*/
h1 {
  color: #963;
  background-color:#333;
}
/*省略大括号（｛｝）*/
h1 
  color: #963;
  background-color: #333;
/*省略大括号（｛｝）和分号（;）*/
h1
  color:#963
  background-color:#333

Im Stylus-Stil können Sie auch unterschiedliche Syntaxregeln in derselben Stildatei verwenden, und die folgende Schreibmethode meldet keinen Fehler:

/*style.styl*/
h1 {
  color  #963
}
h2 
  font-size:1.2em

IV , Sass, LESS und Stylus-Funktionen

Diese drei CSS-Präprozessorsprachen verfügen über einige gleiche Funktionen wie Variablen, Mixins, Verschachtelungen, Funktionen usw. In diesem Abschnitt vergleichen wir die Gemeinsamkeiten und Unterschiede verschiedener Funktionen dieser drei CSS-Präprozessorsprachen sowie deren Verwendung.

1. Variablen

Wenn Sie Entwickler sind, sollten Variablen zu Ihren besten Freunden gehören. In der CSS-Präprozessorsprache können Sie auch Variablen deklarieren und diese im gesamten Stylesheet verwenden. Die CSS-Präprozessorsprache unterstützt jede Variable (z. B. Farbe, numerischer Wert, Text). Dann können Sie die Variable überall referenzieren.

a) Sass-Variablen

Sass-Variablen müssen mit „$“ beginnen, gefolgt vom Variablennamen und Variablenwert, und der Variablenname und der Variablenwert müssen durch einen Doppelpunkt (:) getrennt werden. Genau wie CSS-Eigenschaftseinstellungen:

/*声明变量*/
 
$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;
 
/*调用变量*/                              |  /*转译出来的CSS*/
------------------------------------------+------------------------------
body {                                    |  body {
  color: $mainColor;                      |    color: #963;
  border:1px $borderStyle $mainColor;     |    border:1px dotted #963;
  max-width: $siteWidth;                  |    max-width: 1024px;
}                                         |  }	                                       |  }

b) LESS-Variablen

Variablen deklarieren und Variablen im LESS-Stil aufrufen, sind die gleichen wie bei Sass. Der einzige Unterschied besteht darin, dass das „@“-Zeichen vor dem Variablennamen verwendet wird:

/*声明变量*/

@mainColor: #963;
@siteWidth: 1024px;
@borderStyle: dotted;

/*调用变量*/                            |  /*转译出来的CSS*/
----------------------------------------+-------------------------------
body {                                  |  body {
  color: @mainColor;                    |    color:#963;
  border:1px @borderStyle @mainColor;   |    border:1px dotted #963;
  max-width: @siteWidth;                |    max-width:1024px;
}                                       |  }

c) Stylus-Variablen

Es gibt keine Einschränkungen bei der Deklaration von Variablen im Stylus-Stil. Sie können mit dem „$“-Symbol beginnen. Das abschließende Semikolon (;) ist optional, das Gleichheitszeichen (=) zwischen dem Variablennamen und dem Variablenwert ist jedoch erforderlich. Beachten Sie Folgendes: Wenn wir das Symbol „@“ verwenden, um (0.22.4)-Variablen zu deklarieren, wird Stylus zwar kompiliert, der Variable jedoch nicht der entsprechende Wert zugewiesen. Mit anderen Worten: Deklarieren Sie in Stylus keine Variablen mit dem „@“-Symbol am Anfang. Die Methode zum Aufrufen von Variablen in Stylus ist genau die gleiche wie bei LESS und Sass.

/*声明变量*/
 
mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;
 
/*调用变量*/                            |    /*转译出来的CSS*/
----------------------------------------+--------------------------------
body                                    | body {
  color mainColor                       |   color: #963;
  border 1px $borderStyle mainColor     |   border:1px dotted #963
  max-width siteWidth                   |   max-width:1024px;
                                        | }

Stylus verfügt außerdem über eine einzigartige Funktion, mit der Sie Referenzeigenschaften definieren können, ohne Variablen Werte zuzuweisen:

/*水平垂直居中*/                    |  /*转译出来的CSS*/
------------------------------------+------------------------------------
#logo                               |   #logo {
  position  absolute                |     position:absolute;
  top  50%                          |     top:50%;
  left  50%                         |     left:50%;
  width  w = 150px                  |     width:150px;
  height  h = 80px                  |     height:80px;
  margin-left  -(w / 2)             |     margin-left:-75px;
margin-top  -(h / 2)                |     margin-top:-40px;
                                    |   }

从上面的代码中我们可以看出，CSS预处理器语言中的变量是值级别的重复使用，可以将相同的值定义成变量统一管理起来。

CSS预处理器语言中变量的特性适用于定义主题（也就是我们常说的换肤），我们可以将背景颜色、字体颜色、边框属性等常规样式统一定义，这样不同的主题只需要定义不同的变量文件就可以。

2.作用域（Scope）

CSS预处理器语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是Scope（变量范围，开发人员习惯称之为作用域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释这三款CSS预处理器的作用域使用。

a)Sass的作用域

Sass中作用域在这三款预处理器是最差的，可以说在Sass中是不存在什么全局变量。具体来看下面的代码：

/*Sass样式*/
$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
}

先看转译出来的CSS样式：

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（无全局变量概念）*/
}

示例明显的告诉我们，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。

b)LESS的作用域

LESS中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。

/*LESS样式*/
@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}

转译出来的CSS样式：

.scoped {
  color:white;/*白色（调用了局部变量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（调用了全局变量）*/
}

c)Stylus的作用域

Stylus虽然起步比较晚，但其作用域的特性和LESS一样，可以支持全局变量和局变量。会向上冒泡查找，直到根为止。

3.混合(Mixins)

Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

a)Sass的混合

Sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。

在选择器调用定义好的Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法，就是使用加号“+”调用Mixins，在“+”后紧跟Mixins名。

一起来看个简单的例子，比如说在你的Sass样式中定义了一个名叫“error”的Mixin，这个“error”设置了一个参数“$borderWidth”，在没特别定义外，这个参数的默认值设置为“2px”：

/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
  border:$borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  @include error();/*直接调用error mixins*/
}
.login-error {
  @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

b)LESS的混合

在LESS中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。

不过LESS样式中声明Mixins和Sass声明方法不一样，他更像CSS定义样式，在LESS可以将Mixins看成是一个类选择器，当然Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。

正如Sass混合是的示例，同样在LESS样式中定义一个名叫“error”的Mixin，这个“error”设置了一个参数“@borderWidth”，在没有特别定义外，这个参数的默认值是“2px”：

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
  border:@borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  .error();/*直接调用error mixins*/
}
.login-error {
  .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}

c)Stylus的混合

Stylus中的混合和前两款CSS预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接。

/*声明一个Mixin叫作“error”*/
error(borderWidth=2px){
  border:borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  error();/*直接调用error mixins*/
}
.login-error {
  error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

三个示例都将会转译成相同的CSS代码：

.generic-error {
  border: 2px solid #f00;
  color:#f00;
}
.login-error {
  border:5px solid #f00;
  color: #f00;
}

4.嵌套（Nesting）

CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者ID。

section {
  margin:10px;
}
section nav {
  height:25px;
}
section nav a {
  color: #0982c1;
}
section nav a:hover {
  text-decoration: underline;
}

相反，使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号（｛｝）里写这些元素。同时可以使用“&”符号来引用父选择器。对于Sass、LESS和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：

section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}

上面的预处理器转译出来的CSS代码和我们开始展示的CSS代码是相同的，非常的方便吧！

5.继承（Inheritance）

对于熟悉CSS的同学来说，对于属性的继承并不陌生。平时在写CSS样式常碰到多个元素应用相同的样式时，我们在CSS中通常都是这样写：

p,ul,ol{/*样式写在这里*/}

这样做非常的好，但往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦。为了应对这个问题，CSS预处理器语言可以从一个选择继承另个选择器下的所有样式。

a)Sass和Stylus的继承

Sass和Stylus的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@extend”开始，后面紧跟被继承的选择器：

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

上面的代码转译成CSS：

.block,p,ul,ol {
  margin: 10px 5px;
  padding:2px;
}
p {
  border: 1px solid #eee
}
ul,ol {
  color:#333;
  text-transform:uppercase;
}

b)LESS的继承

LESS支持的继承和Sass与Stylus不一样，他不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

转译出来的CSS代码：

.block {
  margin: 10px 5px;
  padding:2px;
}
p {
  margin: 10px 5px;
  padding:2px;
  border: 1px solid #eee
}
ul,ol {
  margin: 10px 5px;
  padding:2px;
  color:#333;
  text-transform:uppercase;
}

正如所看到的，上面的代码“.block”的样式将会被插入到相应的你要继承的选择器中，但需要注意的是优先级的问题。

6.运算符（Operations）

CSS预处理器语言还具有运算的特性，其简单的讲，就是对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算。这样的特性在CSS样式中是想都不敢想的，但在CSS预处理器语言中对样式做一些运算一点问题都没有了，例如：

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

上面代码是LESS的运算示例，声明一下，在取得“@quarter_page”变量时，我们可以直接除以4，但是在这里，我们只是想演示一下圆括号组成的“运算顺序”（这个运算顺序小学生也知道）。在复合型运算中，小括号也是很有必要的，例如：

border: (@width / 2) solid #000;

Sass在数字运算上要比LESS更专业，他可以直接换算单位了。Sass可以处理无法识别的度量单位，并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

Stylus的运算是三款预处理器语言中最强大的一款，他拥有其他程序语言一样的运算功能，简单点的加减乘除，复杂的有关系运算、逻辑运算等。受限于篇幅，感兴趣的同学可以到官网上仔细阅读。

7.颜色函数

颜色函数是CSS预处理器语言中内置的颜色函数功能，这些功能可以对颜色进行处理，例如颜色的变亮、变暗、饱和度控制、色相控制，渐变颜色等处理十分的方便。

a)Sass颜色函数

lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%);  /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%);   /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color);  /* 返回$color的灰度色*/
complement($color); /* 返回$color的补色 */
invert($color);     /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

这只是Sass中颜色函数的一个简单列表，更多详细的介绍可以阅读Sass文档。

颜色函数可以运用到任何一个元素上，只要其有颜色的属性，下面是一个简单的例子：

$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/
}

b)LESS颜色函数

lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%);  /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%);   /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/
spin(@color, 10);  /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */

LESS的完整颜色函数功能，请阅读LESS文档。

下面是LESS中如何使用一个颜色函数的简单例子：

@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

c)Stylus的颜色函数

lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
darken(color, 10%);  /* 返回的颜色在'color'基础上变暗10% */
saturate(color, 10%);   /* 返回的颜色在'color'基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */

有关于Stylus的颜色函数介绍，请阅读Stylus文档。

下面是Stylus颜色函数的一个简单实例：

color = #0982C1
h1
  background color
  border 3px solid darken(color, 50%)

从上面展示的部分颜色函数可以告诉我们，Sass、LESS和Stylus都具有强大的颜色函数功能，功能特性上都大同小异，只是在使用方法上略有不同。而且他们都具有相同的一个目的，就是方便操作样式中的颜色值。

8.导入（Import）

在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通赤“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。

Sass、LESS和Stylus三款CSS预处理器语言，导入样式的方法都是一样：

被导入文件的样式：

/* file.{type} */
body {
  background: #EEE;
}

需要导入样式的文件：

@import "reset.css";
@import "file.{type}";
p {
  background: #0982C1;
}

转译出来的CSS代码：

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

9.注释（Comment）

CSS预处理器语言中的注释是比较基础的一部分，这三款预处理器语言除了具有标准的CSS注释之外，还具有单行注释，只不过单行注释不会被转译出来。

a)Sass、LESS和Stylus的多行注释

多行注释和CSS的标准注释，他们可以输出到CSS样式中，但在Stylus转译时，只有在“compress”选项未启用的时候才会被输出来。

/*
 *我是注释
*/
body
  padding 5px

b)Sass、LESS和Stylus的单行注释

单行注释跟JavaScript语言中的注释一样，使用双斜杠（//），但单行注释不会输出到CSS中。

//我是注释
@mainColor：#369;//定义主体颜色

在Stylus中除了以上两种注释之外，他还有一种注释，叫作多行缓冲注释。这种注释跟多行注释类似，不同之处在于始的时候，这里是”/*！”。这个相当于告诉Stylus压缩的时候这段无视直接输出。

/*!
*给定数值合体
*/
add(a, b)
  a + b

上面从九个常用的特性对Sass、LESS和Stylus三款CSS预处理器语言的使用做了对比，在某些特性上可以说是一模一样，而有一些特性上功能其实一样，只是在部分书写规则上有所不同。当然有些特性是完全不同。在这里几是从使用方法上做为一个比较，主要目的是让大家经过对比之后，使自己选择哪一款CSS预处理器语言有所方向和帮助。

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonWas ist ein CSS-Präprozessor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!