CSS 前處理器技術已經非常的成熟了，而且也湧現出了越來越多的 CSS 的前處理器框架。本文便總結下 Sass、Less CSS、Stylus這三個前處理器的區別和各自的基本語法。

1.什麼是 CSS 前處理器 CSS 前處理器是一種語言用來為 CSS 增加一些程式設計的的特性，無需考慮瀏覽器的相容性問題，例如你可以在 CSS 中使用變數、簡單的程式邏輯、函式等等在程式語言中的一些基本技巧，可以讓CSS 更見簡潔，適應性更強，程式碼更直觀等諸多好處。

2.基本語法區別: 在使用 CSS 前處理器之前最重要的是理解語法，幸運的是基本上大多數前處理器的語法跟 CSS 都差不多。

首先 Sass 和 Less 都使用的是標準的 CSS 語法，因此如果可以很方便的將已有的 CSS 程式碼轉為前處理器程式碼，預設 Sass 使用 .sass 副檔名，而 Less 使用 .less 副檔名。

/* style.scss or style.less */ h1 {   color: #0982C1; } 這是一個再普通不過的，不過 Sass 同時也支援老的語法，就是不包含花括號和分號的方式：

/* style.sass */ h1   color: #0982c1 而 Stylus 支援的語法要更多樣性一點，它預設使用 .styl 的副檔名，下面是 Stylus 支援的語法：

/* style.styl */ h1 {   color: #0982C1; }

/* omit brackets */ h1   color: #0982C1;

/* omit colons and semi-colons */ h1   color #0982C1 可以在同一個樣式單中使用不同的變數，例如下面的寫法也不會報錯：

h1 {   color #0982c1 } h2   font-size: 1.2em 3.變數 1. sass：

Sass讓人們受益的一個重要特性就是它為css引入了變數。你可以把反覆使用的css屬性值 定義成變數，然後通過變數名來引用它們，而無需重複書寫這一屬性值。

     sass變數必須是以$開頭的，然後變數和值之間使用冒號（：）隔開，和css屬性是一樣的，例如： 1 $maincolor : #092873; $siteWidth : 1024px; $borderStyle : dotted; body {   color: $maincolor;   border: 1px $borderStyle $mainColor;   max-width: $siteWidth; } 2.less css ：

在less檔案中，當一個值需要反覆使用時，可以通過@符號定義變數。已經被賦值的變數以及其他的常量（如畫素、顏色等）都可以參與運算。

 Less css中變數都是用@開頭的，其餘與sass都是一樣的，例如： 1 @maincolor : #092873; @siteWidth : 1024px; @borderStyle : dotted; body {   color: @maincolor;   border: 1px @borderStyle @mainColor;   max-width: @siteWidth; } 3.stylus：

 stylus對變數是沒有任何設定的，可以是以$開頭，或者任何的字元，而且與變數之間可以用冒號，空格隔開，  但是在stylus中不能用@開頭，例如：     maincolor = #092873 siteWidth = 1024px borderStyle = dotted body    color maincolor   border 1px borderStyle mainColor   max-width siteWidth 以上三種寫法都如同一下這種css：

body {   color: #092873;   border: 1px dotted #092873;   max-width: 1024px; } 這樣做的好處也是顯而易見的，在修改多處相同顏色的時候，這時就只需要修改變數值即可。

4.巢狀 如果我們需要在CSS中相同的 parent 引用多個元素，這將是非常乏味的，你需要一遍又一遍地寫 parent。例如：

div {   margin: 10px; } div nav {   height: 25px; } div nav a {   color: #0982C1; } div nav a:hover {   text-decoration: underline; } 如果用 CSS 前處理器，就可以少寫很多單詞，而且父子節點關係一目瞭然，並且sass，Less，stylus都支援下面這樣的寫法，且都是相同的：

//scss style //-----------------------------------  nav {      ul {         margin: 0;         padding: 0;      }      li {         display: inline-block;      }      a {         display: block;         padding: 6px 12px;         text-decoration: none;      }  } //css style //-----------------------------------  nav ul {      margin: 0;      padding: 0;      list-style: none;  }  nav li {      display: inline-block;  }  nav a {      display: block;      padding: 6px 12px;      text-decoration: none;  } 這樣做是非常方便的，也很直觀。

5.運算子 在 CSS 前處理器中還是可以進行樣式的計算如下：

body {   margin: (14px/2);   top: 50px + 100px;   right: 80 * 10%; } 在sass，Less與stylus中都是可以這樣做的。

6.顏色函式 CSS 前處理器一般都會內建一些顏色處理函式用來對顏色值進行處理，例如加亮、變暗、顏色梯度等。

1.sass的顏色處理函式：

lighten($color, 10%);  darken($color, 10%);   saturate($color, 10%);    desaturate($color, 10%); grayscale($color);   complement($color);  invert($color);  mix($color1, $color2, 50%);  例項如下：

$color: #0982C1; h1 {   background: $color;   border: 3px solid darken($color, 50%); } 2.Less css顏色處理函式：

lighten(@color, 10%);  darken(@color, 10%);   saturate(@color, 10%);   desaturate(@color, 10%);  spin(@color, 10);  spin(@color, -10);  mix(@color1, @color2); 示例如下：

@color: #0982C1; h1 {   background: @color;   border: 3px solid darken(@color, 50%); } 3.Stylus顏色處理函式：

lighten(color, 10%);  darken(color, 10%);   saturate(color, 10%);   desaturate(color, 10%);  示例如下;

color = #0982C1  h1   background color   border 3px solid darken(color, 50%) 7.匯入 (Import) 很多 CSS 開發者對匯入的做法都不太感冒，因為它需要多次的 HTTP 請求。但是在 CSS 前處理器中的匯入操作則不同，它只是在語義上包含了不同的檔案，但最終結果是一個單一的 CSS 檔案，如果你是通過 @ import “file.css”; 匯入 CSS 檔案，那效果跟普通的 CSS 匯入一樣。

注意：匯入檔案中定義的混入、變數等資訊也將會被引入到主樣式檔案中，因此需要避免它們互相沖突。  例如：  1.css:

//1.css /* file.{type} */ body {   background: #000; } 2.XXX:

@ import "1.css"; @ import "file.{type}";

p {   background: #092873; } 最終生成的 CSS：

@ import "1.css"; body {   background: #000; } p {   background: #092873; } 8.繼承 當我們需要為多個元素定義相同樣式的時候，我們可以考慮使用繼承的做法.

1.sass：  sass可通過@extend來實現程式碼組合宣告，使程式碼更加優越簡潔。

.message {   border: 1px solid #ccc;   padding: 10px;   color: #333; } .success {   @extend .message;   border-color: green; } .error {   @extend .message;   border-color: red; } .warning {   @extend .message;   border-color: yellow; } 2.Less css：

但是在這方面 Less 表現的稍微弱一些，更像是混入寫法：

.message {   border: 1px solid #ccc;   padding: 10px;   color: #333; } .success {   .message;   border-color: green; } .error {   .message;   border-color: red; } .warning {   .message;   border-color: yellow; } 上面兩種寫法其最終呈現的css樣式都如下：

.message, .success, .error, .warning {   border: 1px solid #cccccc;   padding: 10px;   color: #333; } .success {   border-color: green; } .error {   border-color: red; } .warning {   border-color: yellow; } .message的樣式將會被插入到相應的你想要繼承的選擇器中，但需要注意的是優先順序的問題。

9.Mixins（混入） Mixins 有點像是函式或者是巨集，當某段 CSS 經常需要在多個元素中使用時，可以為這些共用的 CSS 定義一個 Mixin，然後只需要在需要引用這些 CSS 地方呼叫該 Mixin 即可。

1.Sass 的混入語法：

sass中可用mixin定義一些程式碼片段，且可傳引數，方便日後根據需求呼叫。比如說處理css3瀏覽器字首：

@mixin error($borderWidth: 2px) {   border: $borderWidth solid #F00;   color: #F00; } .generic-error {   padding: 20px;   margin: 4px;   @ include error(); //這裡呼叫預設 border: 2px solid #F00; } .login-error {   left: 12px;   position: absolute;   top: 20px;   @ include error(5px); //這裡呼叫 border:5px solid #F00; } 2.Less CSS 的混入語法：  less也支援帶引數的混合以及有預設引數值的混合，如下面的例子所示：

.error(@borderWidth: 2px) {   border: @borderWidth solid #F00;   color: #F00; } .generic-error {   padding: 20px;   margin: 4px;   .error(); //這裡呼叫預設 border: 2px solid #F00; } .login-error {   left: 12px;   position: absolute;   top: 20px;   .error(5px); //這裡呼叫 border:5px solid #F00; } 3.Stylus 的混入語法：

error(borderWidth= 2px) {   border: borderWidth solid #F00;   color: #F00; } .generic-error {   padding: 20px;   margin: 4px;   error();  } .login-error {   left: 12px;   position: absolute;   top: 20px;   error(5px);  } 他們最終呈現的效果都如下：

.generic-error {   padding: 20px;   margin: 4px;   border: 2px solid #f00;   color: #f00; } .login-error {   left: 12px;   position: absolute;   top: 20px;   border: 5px solid #f00;   color: #f00; } 10.3D文字 要生成具有 3D 效果的文字可以使用 text-shadows ，唯一的問題就是當要修改顏色的時候就非常的麻煩，而通過 mixin 和顏色函式可以很輕鬆的實現：

1.sass：

@mixin text3d($color) {   color: $color;   text-shadow: 1px 1px 0px darken($color, 5%),                2px 2px 0px darken($color, 10%),                3px 3px 0px darken($color, 15%),                4px 4px 0px darken($color, 20%),                4px 4px 2px #000; }

h1 {   font-size: 32pt;   @ include text3d(#0982c1); } 2.Less CSS：

.text3d(@color) {   color: @color;   text-shadow: 1px 1px 0px darken(@color, 5%),                2px 2px 0px darken(@color, 10%),                3px 3px 0px darken(@color, 15%),                4px 4px 0px darken(@color, 20%),                4px 4px 2px #000; }

span {   font-size: 32pt;   .text3d(#0982c1); } 3.Stylus：

text3d(color)   color: color   text-shadow: 1px 1px 0px darken(color, 5%),                 2px 2px 0px darken(color, 10%),                 3px 3px 0px darken(color, 15%),                 4px 4px 0px darken(color, 20%),                 4px 4px 2px #000 span   font-size: 32pt   text3d(#0982c1) 其生成的css最終的效果如下：

span {   font-size: 32pt;   color: #0982c1;   text-shadow: 1px 1px 0px #097bb7,                2px 2px 0px #0875ae,                3px 3px 0px #086fa4,                4px 4px 0px #07689a,                4px 4px 2px #000; } 11.列 (Columns) 使用數值操作和變數可以很方便的實現適應螢幕大小的佈局處理。  1.Sass：

$siteWidth: 1024px; $gutterWidth: 20px; $sidebarWidth: 300px; body {   margin: 0 auto;   width: $siteWidth; } .content {   float: left;   width: $siteWidth - ($sidebarWidth+$gutterWidth); } .sidebar {   float: left;   margin-left: $gutterWidth;   width: $sidebarWidth; } 2.Less CSS：

@siteWidth: 1024px; @gutterWidth: 20px; @sidebarWidth: 300px;

body {   margin: 0 auto;   width: @siteWidth; } .content {   float: left;   width: @siteWidth - (@[email protected]); } .sidebar {   float: left;   margin-left: @gutterWidth;   width: @sidebarWidth; } 3.Stylus：

siteWidth = 1024px; gutterWidth = 20px; sidebarWidth = 300px;

body {   margin: 0 auto;   width: siteWidth; } .content {   float: left;   width: siteWidth - (sidebarWidth+gutterWidth); } .sidebar {   float: left;   margin-left: gutterWidth;   width: sidebarWidth; } 其最終生成的css效果如下：

body {   margin: 0 auto;   width: 1024px; } .content {   float: left;   width: 704px; } .sidebar {   float: left;   margin-left: 20px;   width: 300px; } 12.高階語法 1.在sass中，還支援條件語句：

    @if可一個條件單獨使用，也可以和@else結合多條件使用 1 程式碼如下：

$lte7: true; $type: monster; .ib{     display:inline-block;     @if $lte7 {         *display:inline;         *zoom:1;     } } p {   @if $type == ocean {     color: blue;   } @else if $type == matador {     color: red;   } @else if $type == monster {     color: green;   } @else {     color: black;   } } 其最終的css程式碼如下：

.ib{     display:inline-block;     *display:inline;     *zoom:1; } p {   color: green;  } 2.除卻條件語句，sass還支援for迴圈：

for迴圈有兩種形式，分別為：

[email protected] $var from <start> through <end> [email protected] $var from <start> to <end>。 其中$i表示變數，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

@for $i from 1 to 10 {   .border-#{$i} {     border: #{$i}px solid blue;   } } 同時也支援while迴圈：

$i: 6; @while $i > 0 {   .item-#{$i} { width: 2em * $i; }   $i: $i - 2; } 最後，同時支援each命令，作用與for類似：

$animal-list: puma, sea-slug, egret, salamander; @each $animal in $animal-list {   .#{$animal}-icon {     background-image: url('/images/#{$animal}.png');   } } 其css最終效果如下：

.puma-icon {   background-image: url('/images/puma.png');  } .sea-slug-icon {   background-image: url('/images/sea-slug.png');  } .egret-icon {   background-image: url('/images/egret.png');  } .salamander-icon {   background-image: url('/images/salamander.png');  } 以上就是sass，Less css與stylus的最顯著的區別。 ---------------------  作者：黛梨  來源：CSDN  原文：https://blog.csdn.net/pedrojuliet/article/details/72887490  版權宣告：本文為博主原創文章，轉載請附上博文連結！