css預處理器是什麼-css教學-PHP中文網

CSS預處理器是一種專門的程式語言，用來為CSS增加一些程式設計特性（CSS本身不是程式語言）。不需要考慮瀏覽器相容問題，因為CSS預處理器最終編譯和輸出的仍是標準的CSS樣式。可以在CSS預處理器中：使用變數、簡單邏輯判斷、函數等基本程式設計技巧。

css預處理器是什麼

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

CSS(Cascading Style Sheet)被翻譯為級聯樣式表，做為一名前端從業人員來說，這個專業名詞並不陌生，在業界通常稱之為「風格樣式表（Style Sheet）”，它主要是用來進行網頁風格設計的。透過設立樣式表，可以統一控制HTML（XHTML）中各標籤的顯示屬性。可以使人更能有效的控制Web頁面（或稱Web應用程式）外觀，可以精確指定Web元素位置，外觀以及創造特殊效果的能力。 CSS擁有對網頁物件和模型樣式編輯能力，並且能夠進行初步互動設計，是目前基於文字展示最優秀的表現設計語言。 CSS能夠根據不同使用者的理解能力，簡化或優化寫法，針對各類族群有較強的易讀性。

就CSS本身而言，對大多數Web前端從業人員來說就不是問題。學過CSS的人都知道，它不是一種程式語言。你可以用它來開發網頁樣式，但是沒辦法用它來程式設計。換句話說，CSS基本上是設計師的工具，不是程式設計師的工具。在程式設計師的眼裡，CSS是很頭痛的事情，它並不像其它程式語言，比如說PHP、Javascript等等，有自己的變數、常數、條件語句以及一些程式設計語法，只是一行行單純的屬性描述，寫起來相當的費事，而且程式碼難易組織和維護。

很自然的，有人就開始在想，能不能給CSS像其他程式語言一樣，加入一些程式設計元素，讓CSS能像其他程式語言一樣可以做一些預定的處理。這樣一來，就有了「CSS預處器（CSS Preprocessor）」。

一、什麼是CSS預處理器

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為CSS增加了一些程式設計的特性，將CSS作為目標產生文件，然後開發者就只要使用這種語言進行編碼工作。通俗的說，CSS預處理器用一種專門的程式語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件，以供專案使用。 CSS預處理器為CSS增加一些程式設計的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變數、簡單的邏輯程式、函數等等在程式語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於程式碼的維護等諸多好處。

CSS預處理器技術已經非常的成熟，而且也湧現了很多種不同的CSS預處理器語言，比如說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer 、DT CSS等。如此之多的CSS預處理器，那麼「我該選擇哪種CSS預處理器？」也相應成了最近網路上的一大熱門話題，在Linkedin、Twitter、CSS-Trick、知呼以及各大技術論壇上，很多人為此爭論不休。相較於過計我們對是否應該使用CSS預處理器的話題而言，這已經是很大的進步了。

到目前為止，在眾多優秀的CSS預處理器語言中就屬Sass、LESS和Stylus最優秀，討論的也多，對比的也多。本文將分別從他們產生的背景、安裝、使用語法、異同等幾個對比之處向你介紹這三款CSS預處理器語言。相信前端開發工程師會做出自己的選擇－我要選擇哪一款CSS預處理器。

（學習影片分享：css影片教學）

二、Sass、LESS和Stylus背景介紹

為了能更好的了解這三款流行的CSS預處理器，我們先從其背景入手，簡單的了解各自的背景資訊。

1.Sass背景介紹

Sass是CSS（層疊樣式表）的語法的一種擴充，誕生於2007年，最早也是最成熟的一款CSS預處理器語言，它可以使用變數、常數、巢狀、混入、函數等功能，可以更有效有彈性的寫出CSS。 Sass最後還是會編譯出合法的CSS讓瀏覽器使用，也就是說它本身的語法並不太容易讓瀏覽器識別，因為它不是標準的CSS格式，在它的語法內部可以使用動態變數等，所以它更像一種極簡單的動態語言。

其實實作在的Sass已經有了兩套語法規則：一個依舊是用縮排作為分隔符號來區分程式碼區塊的；另一套規則和CSS一樣採用了大括號（｛｝）作為分隔符。後者語法規則又稱SCSS，在Sass3之後的版本都支援這種語法規則。

附註：Sass官網網址：http://sass-lang.com

2.LESS的背景介紹

2009年開源的一個項目，受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。 LESS提供了多種方式能平滑的將寫好的程式碼轉換成標準的CSS程式碼，在許多流行的框架和工具中已經能經常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。

根據維基百科上的介紹，其實LESS是Alexis Sellier受Sass的影響所創造的一個開源專案。當時SASS採用了縮排作為分隔符號來區分程式碼區塊，而不是CSS中廣為使用的大括號（｛｝）。為了讓CSS現有的使用者使用起來更佳方便，Alexis開發了LESS並提供了類似CSS的書寫功能。

註：LESS的官網：http://lesscss.org

3.Stylus背景介紹

Stylus，2010年產生，來自於Node.js社區，主要用來給Node專案進行CSS預處理支持，在此社區之內有一定支持者，在廣泛的意義上人氣還完全不如Sass和LESS。

Stylus被稱為是一種革命性的新語言，提供一個高效、動態、和使用表達方式來產生CSS，以供瀏覽器使用。 Stylus同時支援縮排和CSS常規樣式書寫規則。

附註：Stylus官網：http://learnboost.github.com/stylus

三、Sass、LESS和Stylus的語法

#每一種語言都有自己一定的語法規則，CSS預處理器語言也不例外，在真正使用CSS預處器語言之前還有一個不可缺少的知識點，就是對語法的理解。值得慶幸的是，這三款CSS預處理器語言的語法和CSS語法都差不多。

1.Sass語法

Sass3.0版本開始使用的是標準的CSS語法，和SCSS可以說是一樣的。這樣Sass程式碼轉換成CSS程式碼變得更容易。預設Sass使用“.scss”副檔名。 Sass語法規則可以像CSS一樣書寫：

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

登入後複製

正如你所看到的，在Sass樣式中，這樣的程式碼是在簡單不過的了。

重要的一點是，Sass也同時支援舊的語法，舊的語法和常規的CSS語法略有不同，他需要嚴格的語法，任何的縮排和字元的錯誤都會造成樣式的編譯錯誤。 Sass可以省略大括號（｛｝）和分號（；），完全依賴嚴格的縮排和格式化程式碼，而且檔案使用「.sass」副檔名，他的語法類似：

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

登入後複製

2.LESS語法

LESS是CSS的擴展形式，它並沒有閹割CSS的功能，而是在現有的CSS語法上，增加了許多額外的功能。就語法規則而言，LESS和Sass一樣，都是使用CSS的標準語法，只是LESS的原始檔的副檔名是“.less”，其基本語法類似於：

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

登入後複製

##3 .Stylus語法

Stylus的語法花樣多一些，它的檔案副檔名是“.styl”，Stylus也接受標準的CSS語法，但是他也像Sass老的語法規則，使用縮進控制，同時Stylus也接受不帶大括號（｛｝）和分號的語法，如下所示：

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

登入後複製

在Stylus樣式中，你也可以在同一個樣式檔案中使用不同的語法規則，下面這樣的寫法也不會報錯：

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

登入後複製

四、Sass、LESS和Stylus特性

這三款CSS預處理器語言具有一些相同的特性，例如：變數、混入、巢狀、函數等。在這一節中，我們依序來比較這三款CSS預處理器語言各種特性的異同之處，以及使用方法。

1.變數（Variables）

如果你是開發人員，變數應該是你最好朋友之一。在CSS預處理器語言中你也可以宣告變量，並在整個樣式表中使用。 CSS預處理器語言支援任何變數（例如：顏色、數值、文字）。然後你可以在任意地方引用變數。

a)Sass的變數

Sass宣告變數必須是「$」開頭，後面緊跟著變數名稱和變數值，而且變數名稱和變數值需要使用冒號（：）分隔開。就像CSS屬性設定一樣：

/*声明变量*/
 
$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的變數

LESS樣式中宣告變數和呼叫變數和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;
}                                       |  }

登入後複製

c)Stylus的變數

Stylus樣式中宣告變數沒有任何限定，你可以使用「$」符號開始。結尾的分號（;）可有可無，但變數名和變數值之間的等號（=）是需要的。有一點要注意的是，如果我們使用「@」符號開頭來聲明（0.22.4）變量，Stylus會進行編譯，但其對應的值並不會賦值給變數。換句話說，在Stylus中不要使用「@」符號開頭宣告變數。 Stylus中呼叫變數的方法和LESS、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還有一個獨特功能，不需要分配值給變數就可以定義引用屬性：

/*水平垂直居中*/                    |  /*转译出来的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%); /* 返回的颜色在&#39;color&#39;基础上变亮10% */
darken(color, 10%);  /* 返回的颜色在&#39;color&#39;基础上变暗10% */
saturate(color, 10%);   /* 返回的颜色在&#39;color&#39;基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在&#39;color&#39;基础上饱和度降低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预处理器语言有所方向和帮助。

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

以上是css預處理器是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！