Qu'est-ce que le préprocesseur CSS

Le préprocesseur CSS est un langage de programmation spécialisé utilisé pour ajouter certaines fonctionnalités de programmation au CSS (le CSS lui-même n'est pas un langage de programmation). Il n'est pas nécessaire de prendre en compte les problèmes de compatibilité du navigateur, car le préprocesseur CSS compile et génère en fin de compte les styles CSS standard. Vous pouvez utiliser des compétences de base en programmation telles que des variables, des jugements logiques simples et des fonctions dans le préprocesseur CSS.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

CSS (Cascading Style Sheet) est traduit par Cascading Style Sheet. En tant que praticien front-end, ce terme professionnel n'est pas inconnu. Il est généralement appelé « Feuille de style » dans l'industrie. qui est principalement utilisé pour la conception de styles de pages Web. En mettant en place une feuille de style, vous pouvez contrôler uniformément les attributs d'affichage de chaque balise en HTML (XHTML). Il permet aux utilisateurs de contrôler plus efficacement l'apparence des pages Web (ou des applications Web), de spécifier avec précision la position et l'apparence des éléments Web et de créer des effets spéciaux. CSS a la capacité de modifier les styles d'objets et de modèles de pages Web et peut effectuer une conception interactive préliminaire. Il s'agit actuellement du langage de conception le plus performant basé sur l'affichage de texte. CSS peut simplifier ou optimiser la méthode d'écriture en fonction de la capacité de compréhension des différents utilisateurs, la rendant hautement lisible pour tous les types de personnes.

En ce qui concerne CSS lui-même, ce n'est pas un problème pour la plupart des praticiens du web front-end. Quiconque a étudié CSS sait que ce n’est pas un langage de programmation. Vous pouvez l'utiliser pour développer des styles de pages Web, mais vous ne pouvez pas l'utiliser pour programmer. En d’autres termes, CSS est essentiellement un outil de concepteur et non un outil de programmeur. Aux yeux des programmeurs, CSS est un casse-tête. Contrairement à d'autres langages de programmation, tels que PHP, Javascript, etc., il possède ses propres variables, constantes, instructions conditionnelles et une certaine syntaxe de programmation. est assez long à écrire et le code est difficile à organiser et à maintenir.

Naturellement, certaines personnes ont commencé à se demander si certains éléments de programmation pouvaient être ajoutés au CSS comme d'autres langages de programmation, afin que CSS puisse effectuer certains traitements prédéterminés comme d'autres langages de programmation. De cette façon, il existe un « préprocesseur CSS ».

1. Qu'est-ce que le préprocesseur CSS

Le préprocesseur CSS définit un nouveau langage L'idée de base est d'utiliser un langage de programmation spécialisé, ajoute quelques fonctionnalités de programmation au CSS, utilise. CSS comme cible pour générer des fichiers, et les développeurs n'ont alors besoin d'utiliser ce langage que pour le travail de codage. En termes simples, le préprocesseur CSS utilise un langage de programmation spécialisé pour concevoir des styles de pages Web, puis les compile dans des fichiers CSS normaux pour une utilisation dans le projet. Le préprocesseur CSS ajoute certaines fonctionnalités de programmation au CSS sans avoir à prendre en compte les problèmes de compatibilité du navigateur. Par exemple, vous pouvez utiliser des variables, des programmes logiques simples, des fonctions, etc. en CSS. Certaines fonctionnalités de base des langages de programmation vous permettent d'utiliser davantage de CSS. concis, plus adaptable, plus lisible, plus facile à maintenir et bien d’autres avantages.

La technologie des préprocesseurs CSS est très mature et de nombreux langages de préprocesseurs CSS différents ont émergé, tels que : Sass (SCSS), LESS, Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS, etc. Il y a tellement de préprocesseurs CSS, donc "Quel préprocesseur CSS dois-je choisir ?" est devenu récemment un sujet brûlant sur Internet, sur Linkedin, Twitter, CSS-Trick, Zhihu et les principaux forums techniques, de nombreuses personnes en discutent. Il s’agit d’un grand pas en avant par rapport à la question de savoir si nous devrions utiliser des préprocesseurs CSS.

Jusqu'à présent, parmi les nombreux excellents langages de préprocesseur CSS, Sass, LESS et Stylus sont les meilleurs, avec de nombreuses discussions et comparaisons. Cet article vous présentera ces trois langages de préprocesseur CSS à partir de leur arrière-plan, de leur installation, de leur syntaxe d'utilisation, de leurs différences et d'autres comparaisons. Je pense que les ingénieurs de développement front-end feront leur propre choix : quel préprocesseur CSS dois-je choisir.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

2. Introduction à Sass, LESS et Stylus

Afin de mieux comprendre ces trois éléments. Il s'agit d'un préprocesseur CSS populaire. Commençons par son arrière-plan et comprenons brièvement les informations de base de chacun.

1. Introduction à l'arrière-plan Sass

Sass est une extension de la syntaxe CSS (Cascading Style Sheets). Elle est née en 2007 et est la plus ancienne et la plus mature. un. Un langage de préprocesseur CSS qui peut utiliser des variables, des constantes, des imbrications, des mixins, des fonctions et d'autres fonctions pour écrire du CSS de manière plus efficace et plus flexible. Sass finira par compiler du CSS légal pour que le navigateur puisse l'utiliser, ce qui signifie que sa propre syntaxe n'est pas facile à reconnaître pour le navigateur, car ce n'est pas un format CSS standard et des variables dynamiques peuvent être utilisées dans sa syntaxe, donc c'est plus comme un langage dynamique très simple.

En fait, Sass dispose désormais de deux ensembles de règles grammaticales : l'un utilise toujours l'indentation comme séparateur pour distinguer les blocs de code ; l'autre ensemble de règles utilise des accolades ({}) comme séparateur comme le symbole CSS. Cette dernière règle de grammaire est également appelée SCSS et est prise en charge par les versions postérieures à Sass3.

Remarque : Adresse du site officiel de Sass : http://sass-lang.com

2. Introduction générale à LESS

Un projet open source de 2009, fortement influencé par Sass, mais qui utilise la syntaxe CSS, ce qui facilite le démarrage de la plupart des développeurs et des concepteurs. . LESS offre une variété de façons de convertir facilement du code écrit en code CSS standard. LESS peut souvent être vu dans de nombreux frameworks et outils populaires (par exemple, le framework Bootstrap de Twitter utilise LESS).

D'après l'introduction sur Wikipédia, LESS est en réalité un projet open source créé par Alexis Sellier sous l'influence de Sass. À cette époque, SASS utilisait l'indentation comme séparateur pour distinguer les blocs de code, au lieu des accolades ({}) largement utilisées en CSS. Afin de le rendre plus pratique pour les utilisateurs existants de CSS, Alexis a développé LESS et fourni des fonctions d'écriture de type CSS.

Remarque : Site officiel de LESS : http://lesscss.org

3. Introduction à l'arrière-plan du stylet

Le stylet, produit en 2010, vient de. La communauté Node.js est principalement utilisée pour fournir un support de prétraitement CSS pour les projets Node. Elle a certains partisans au sein de cette communauté, mais au sens large, sa popularité n'est pas aussi bonne que celle de Sass et LESS.

Stylus est présenté comme un nouveau langage révolutionnaire qui offre un moyen efficace, dynamique et expressif de générer du CSS destiné aux navigateurs. Stylus prend en charge à la fois l'indentation et les règles d'écriture de style CSS standard.

Remarque : Site officiel de Stylus : http://learnboost.github.com/stylus

3. Syntaxe de Sass, LESS et Stylus

Chaque langage A a ses propres règles grammaticales, et le langage préprocesseur CSS ne fait pas exception. Avant d'utiliser réellement le langage préprocesseur CSS, il existe un autre point de connaissance indispensable, à savoir la compréhension de la grammaire. Heureusement, la syntaxe et la syntaxe CSS de ces trois langages de préprocesseur CSS sont similaires.

1. Syntaxe Sass

La version Sass3.0 commence à utiliser la syntaxe CSS standard, qui peut être considérée comme la même que SCSS. Cela facilite la conversion du code Sass en code CSS. Par défaut, Sass utilise l'extension ".scss". Les règles de syntaxe Sass peuvent être écrites comme CSS :

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

Comme vous pouvez le voir, dans le style Sass, un tel code ne peut pas être plus simple.

Le point important est que Sass prend également en charge l'ancienne syntaxe. L'ancienne syntaxe est légèrement différente de la syntaxe CSS standard. Toute erreur d'indentation et de caractère entraînera une erreur de style. Sass peut omettre les accolades ({{}) et les points-virgules (;), en s'appuyant entièrement sur une indentation et un formatage stricts du code, et le fichier utilise l'extension ".sass". Sa syntaxe est similaire à :

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

. 2. Syntaxe LESS

LESS est une forme étendue de CSS. Elle n'émascule pas les fonctions du CSS, mais ajoute de nombreuses fonctions supplémentaires à la syntaxe CSS existante. En termes de règles de syntaxe, LESS, comme Sass, utilise la syntaxe standard du CSS, sauf que l'extension du fichier source de LESS est ".less", et sa syntaxe de base est similaire à :

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

3 Syntaxe .Stylus

Stylus a plus d'astuces de syntaxe. Son extension de fichier est ".styl". Stylus accepte également la syntaxe CSS standard, mais il utilise également des abréviations comme les anciennes règles de syntaxe de Sass. style, vous pouvez également utiliser une syntaxe différente dans le même fichier de style. Règles, la méthode d'écriture suivante ne signalera pas d'erreur :

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

4. Fonctionnalités Sass, LESS et Stylus

<.>Ces trois langages de préprocesseur CSS ont certaines des mêmes fonctionnalités telles que : variables, mixins, imbrication, fonctions, etc. Dans cette section, nous comparerons les similitudes et les différences entre les diverses fonctionnalités de ces trois langages de préprocesseur CSS, ainsi que la manière de les utiliser.

1. Variables

Si vous êtes développeur, les variables devraient être l'une de vos meilleures amies. Dans le langage du préprocesseur CSS, vous pouvez également déclarer des variables et les utiliser dans la feuille de style. Le langage du préprocesseur CSS prend en charge n'importe quelle variable (par exemple couleur, valeur numérique, texte). Ensuite, vous pouvez référencer la variable n'importe où.

a) Variables Sass

Les variables Sass doivent commencer par "$", suivi du nom de la variable et de la valeur de la variable, et le nom de la variable et la valeur de la variable doivent être utilisés un deux-points ( :) séparé. Tout comme les paramètres des propriétés CSS :

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

b) Variables LESS

Déclarer des variables et appeler des variables dans le style LESS sont les mêmes que Sass, la seule différence est devant le nom de la variable Le caractère "@" est utilisé :

/*声明变量*/
 
$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) Variables du stylet

Il n'y a aucune restriction sur la déclaration des variables dans le style Stylus. Vous pouvez commencer par. le symbole "$". Le point-virgule final (;) est facultatif, mais le signe égal (=) entre le nom de la variable et la valeur de la variable est obligatoire. Une chose à noter est que si nous utilisons le symbole "@" pour déclarer des variables (0.22.4), Stylus compilera, mais la valeur correspondante ne sera pas attribuée à la variable. En d'autres termes, ne déclarez pas de variables dans Stylus avec le symbole "@" au début. La méthode d'appel des variables dans Stylus est exactement la même que celle de LESS et 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 possède également une fonctionnalité unique qui vous permet de définir des attributs de référence sans attribuer de valeurs aux variables :

/*水平垂直居中*/                    |  /*转译出来的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预处理器语言有所方向和帮助。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!