css預處理器指的是什么

這篇文章主要介紹css預處理器指的是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

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

CSS(Cascading Style Sheet)被譯為級聯樣式表，做為一名前端從業人員來說，這個專業名詞并不陌生，在行業中通常稱之為“風格樣式表（Style Sheet）”，它主要是用來進行網頁風格設計的。通過設立樣式表，可以統一地控制HTML（XHTML）中各標簽的顯示屬性?？梢允谷烁苡行У目刂芖eb頁面（或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代碼，在很多流行的框架和工具中已經能經?？吹絃ESS的身影了（例如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新版語法規則*/
h2{
  color:#936;
  background-color:#333;
}

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

重要的一點是，Sass也同時支持老的語法，老的語法和常規的CSS語法略有不同，他需要嚴格的語法，任何的縮進和字符的錯誤都會造成樣式的編譯錯誤。Sass可以省略大括號（｛｝）和分號（；），完全依靠嚴格的縮進和格式化代碼，而且文件使用“.sass”擴展名，他的語法類似于：

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

2.LESS語法

LESS是CSS的一種擴展形式，它并沒有閹割CSS的功能，而是在現有的CSS語法上，添加了很多額外的功能。就語法規則而言，LESS和Sass一樣，都是使用CSS的標準語法，只是LESS的源文件的擴展名是“.less”，其基本語法類似于：

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

3.Stylus語法

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

/*style.styl*/
/*類似于CSS標準語法*/
h2 {
  color: #963;
  background-color:#333;
}
/*省略大括號（｛｝）*/
h2 
  color: #963;
  background-color: #333;
/*省略大括號（｛｝）和分號（;）*/
h2
  color:#963
  background-color:#333

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

/*style.styl*/
h2 {
  color  #963
}
h3 
  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;
h2 {
  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;
h2 {
  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
h2
  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預處理器指的是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！