CSS預處理器Sass、LESS 和 Stylus

時間  2019-11-08
標籤 css 預處理 sass stylus 欄目 CSS 简体版
原文   原文鏈接

CSS 預處理器技術已經很是的成熟，並且也涌現出了愈來愈多的 CSS 的預處理器框架。本文向你介紹使用最爲廣泛的三款 CSS 預處理器框架，分別是 Sass、Less CSS、Stylus。css

首先咱們來簡單介紹下什麼是 CSS 預處理器，CSS 預處理器是一種語言用來爲 CSS 增長一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等諸多好處。html

不要再停留在石器時代了，下面讓咱們開始 CSS 預處理器之旅。git

咱們將會從語法、變量、嵌套、混入(Mixin)、繼承、導入、函數和操做符等方面分別對這三個框架進行比較介紹。github

語法web

在使用 CSS 預處理器以前最重要的是理解語法，幸運的是基本上大多數預處理器的語法跟 CSS 都差很少。編程

首先 Sass 和 Less 都使用的是標準的 CSS 語法，所以若是你能夠很方便的將已有的 CSS 代碼轉爲預處理器代碼，默認 Sass 使用 .sass 擴展名，而 Less 使用 .less 擴展名。瀏覽器

下面是這兩者的語法：sass

?
1
2
3
4
/* style.scss or style.less */
h 1 {
   color : #0982C1 ;
}

 

你注意到了，這是一個再普通不過的，不過 Sass 同時也支持老的語法，就是不包含花括號和分號的方式：框架

?
1
2
3
/* style.sass */
h 1
   color : #0982c1

而 Stylus 支持的語法要更多樣性一點，它默認使用 .styl 的文件擴展名，下面是 Stylus 支持的語法：less

?
1
2
3
4
5
6
7
8
9
10
11
12
/* style.styl */
h 1 {
   color : #0982C1 ;
}
  
/* omit brackets */
h 1
   color : #0982C1 ;
  
/* omit colons and semi-colons */
h 1
   color #0982C1

你也能夠在同一個樣式單中使用不一樣的變量，例以下面的寫法也不會報錯：

?
1
2
3
4
5
h 1 {
   color #0982c1
}
h 2
   font-size : 1.2em

變量

你能夠在 CSS 預處理器中聲明變量，並在整個樣式單中使用，支持任何類型的變量，例如顏色、數值（不論是否包括單位）、文本。而後你能夠任意引用該變量。

Sass 的變量必須是 $ 開始，而後變量名和值使用冒號隔開，跟 CSS 的屬性一致：

?
1
2
3
4
5
6
7
8
9
$mainColor: #0982c1 ;
$siteWidth: 1024px ;
$borderStyle: dotted ;
  
body {
   color : $mainColor;
   border : 1px $borderStyle $mainColor;
   max-width : $siteWidth;
}

而 Less 的變量名使用 @ 符號開始：

?
1
2
3
4
5
6
7
8
9
@mainColor: #0982c1 ;
@siteWidth: 1024px ;
@borderStyle: dotted ;
  
body {
   color : @mainColor;
   border : 1px @borderStyle @mainColor;
   max-width : @siteWidth;
}

Stylus 對變量名沒有任何限定，你能夠是 $ 開始，也能夠是任意的字符，並且與變量值之間能夠用冒號、空格隔開，須要注意的是 Stylus (0.22.4) 將會編譯 @ 開始的變量，但其對應的值並不會賦予該變量，換句話說，在 Stylus 的變量名不要用 @ 開頭。

?
1
2
3
4
5
6
7
8
mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
  
body
   color mainColor
   border 1px $borderStyle mainColor
   max-width siteWidth

上面的三種不一樣的 CSS 預處理器的寫法，最終都將產生相同的結果：

?
1
2
3
4
5
body {
   color : #0982c1 ;
   border : 1px dotted #0982c1 ;
   max-width : 1024px ;
}

你能夠想象，加入你的 CSS 中使用了某個顏色的地方多達數十次，那麼要修改顏色時你必須找到這數十次的地方並一一修改，而有了 CSS 預處理器，修改一個地方就夠了！

嵌套

若是咱們須要在CSS中相同的 parent 引用多個元素，這將是很是乏味的，你須要一遍又一遍地寫 parent。例如：

?
1
2
3
4
5
6
7
8
9
10
11
12
section {
   margin : 10px ;
}
section nav {
   height : 25px ;
}
section nav a {
   color : #0982C1 ;
}
section nav a:hover {
   text-decoration : underline ;
}

而若是用 CSS 預處理器，就能夠少些不少單詞，並且父子節點關係一目瞭然。咱們這裏提到的三個 CSS 框架都是容許嵌套語法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
section {
   margin : 10px ;
  
   nav {
     height : 25px ;
  
     a {
       color : #0982C1 ;
  
       &:hover {
         text-decoration : underline ;
       }
     }
   }
}

最終生成的 CSS 結果是：

?
1
2
3
4
5
6
7
8
9
10
11
12
section {
   margin : 10px ;
}
section nav {
   height : 25px ;
}
section nav a {
   color : #0982C1 ;
}
section nav a:hover {
   text-decoration : underline ;
}

很是之方便！

Mixins (混入)

Mixins 有點像是函數或者是宏，當你某段 CSS 常常須要在多個元素中使用時，你能夠爲這些共用的 CSS 定義一個 Mixin，而後你只須要在須要引用這些 CSS 地方調用該 Mixin 便可。

Sass 的混入語法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */
@mixin error($borderWidth: 2px ) {
   border : $borderWidth solid #F00 ;
   color : #F00 ;
}
  
.generic-error {
   padding : 20px ;
   margin : 4px ;
   @ include error(); /* Applies styles from mixin error */
}
.login-error {
   left : 12px ;
   position : absolute ;
   top : 20px ;
   @ include error( 5px ); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}

Less CSS 的混入語法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px ) {
   border : @borderWidth solid #F00 ;
   color : #F00 ;
}
  
.generic-error {
   padding : 20px ;
   margin : 4px ;
   .error(); /* Applies styles from mixin error */
}
.login-error {
   left : 12px ;
   position : absolute ;
   top : 20px ;
   .error( 5px ); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

Stylus 的混入語法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */
error(borderWidth= 2px ) {
   border : borderWidth solid #F00 ;
   color : #F00 ;
}
  
.generic-error {
   padding : 20px ;
   margin : 4px ;
   error(); /* Applies styles from mixin error */
}
.login-error {
   left : 12px ;
   position : absolute ;
   top : 20px ;
   error( 5px ); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}

最終它們都將編譯成以下的 CSS 樣式：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
.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 ;
}

繼承

當咱們須要爲多個元素定義相一樣式的時候，咱們能夠考慮使用繼承的作法。例如咱們常常須要：

?
1
2
3
4
5
p,
ul,
ol {
   /* styles here */
}

在 Sass 和 Stylus 咱們能夠這樣寫：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
. block {
   margin : 10px 5px ;
   padding : 2px ;
}
  
p {
   @extend . block ; /* Inherit styles from '.block' */
   border : 1px solid #EEE ;
}
ul, ol {
   @extend . block ; /* Inherit styles from '.block' */
   color : #333 ;
   text-transform : uppercase ;
}

在這裏首先定義 .block 塊，而後讓 p 、ul 和 ol 元素繼承 .block ，最終生成的 CSS 以下：

?
1
2
3
4
5
6
7
8
9
10
11
. block , p, ul, ol {
   margin : 10px 5px ;
   padding : 2px ;
}
p {
   border : 1px solid #EEE ;
}
ul, ol {
   color : #333 ;
   text-transform : uppercase ;
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
. block {
   margin : 10px 5px ;
   padding : 2px ;
}
  
p {
   . block ; /* Inherit styles from '.block' */
   border : 1px solid #EEE ;
}
ul, ol {
   . block ; /* Inherit styles from '.block' */
   color : #333 ;
   text-transform : uppercase ;
}

生成的 CSS 以下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
. 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 的樣式將會被插入到相應的你想要繼承的選擇器中，但須要注意的是優先級的問題。

導入 (Import)

不少 CSS 開發者對導入的作法都不太感冒，由於它須要屢次的 HTTP 請求。可是在 CSS 預處理器中的導入操做則不一樣，它只是在語義上包含了不一樣的文件，但最終結果是一個單一的 CSS 文件，若是你是經過 @ import "file.css"; 導入 CSS 文件，那效果跟普通的 CSS 導入同樣。注意：導入文件中定義的混入、變量等信息也將會被引入到主樣式文件中，所以須要避免它們互相沖突。

reset.css:

?
1
2
3
4
/* file.{type} */
body {
   background : #EEE ;
}

main.xxx:

?
1
2
3
4
5
6
@ import "reset.css" ;
@ import "file.{type}" ;
  
p {
   background : #0982C1 ;
}

最終生成的 CSS：

?
1
2
3
4
5
6
7
@ import "reset.css" ;
body {
   background : #EEE ;
}
p {
   background : #0982C1 ;
}

顏色函數

CSS 預處理器通常都會內置一些顏色處理函數用來對顏色值進行處理，例如加亮、變暗、顏色梯度等。

Sass：

?
1
2
3
4
5
6
7
8
9
10
11
lighten($color, 10% ); /* returns a color 10% lighter than $color */
darken($color, 10% );  /* returns a color 10% darker than $color */
  
saturate($color, 10% );   /* returns a color 10% more saturated than $color */
desaturate($color, 10% ); /* returns a color 10% less saturated than $color */
  
grayscale($color);  /* returns grayscale of $color */
complement($color); /* returns complement color of $color */
invert ($color);     /* returns inverted color of $color */
  
mix ($color 1 , $color 2 , 50% ); /* mix $color1 with $color2 with a weight of 50% */

 

上面只是簡單列了 Sass 的一些基本顏色處理函數，完整的列表請看 Sass Documentation.

下面是一個具體的例子：

?
1
2
3
4
5
6
$ color : #0982C1 ;
  
h 1 {
   background : $color;
   border : 3px solid darken($color, 50% );
}

Less CSS:

?
1
2
3
4
5
6
7
8
9
10
lighten(@color, 10% ); /* returns a color 10% lighter than @color */
darken(@color, 10% );  /* returns a color 10% darker than @color */
  
saturate(@color, 10% );   /* returns a color 10% more saturated than @color */
desaturate(@color, 10% ); /* returns a color 10% less saturated than @color */
  
spin(@color, 10 );  /* returns a color with a 10 degree larger in hue than @color */
spin(@color, -10 ); /* returns a color with a 10 degree smaller hue than @color */
  
mix (@color 1 , @color 2 ); /* return a mix of @color1 and @color2 */

 

LESS 完整的顏色函數列表請看 LESS Documentation.

LESS 使用顏色函數的例子：

?
1
2
3
4
5
6
@ color : #0982C1 ;
  
h 1 {
   background : @color;
   border : 3px solid darken(@color, 50% );
}

Stylus:

?
1
2
3
4
5
lighten(color, 10% ); /* returns a color 10% lighter than 'color' */
darken(color, 10% );  /* returns a color 10% darker than 'color' */
  
saturate(color, 10% );   /* returns a color 10% more saturated than 'color' */
desaturate(color, 10% ); /* returns a color 10% less saturated than 'color' */

 

完整的顏色函數列表請閱讀 Stylus Documentation.

實例：

?
1
2
3
4
5
color = #0982C1
  
h 1
   background color
   border 3px solid darken(color, 50% )

運算符

你能夠直接在 CSS 預處理器中進行樣式的計算，例如：

?
1
2
3
4
5
6
body {
   margin : ( 14px / 2 );
   top : 50px + 100px ;
   right : 100px - 50px ;
   left : 10 * 10 ;
}

一些跟具體瀏覽器相關的處理

這是宣傳使用預處理的緣由之一，而且是一個很好的理由，這樣能夠節省的大量的時間和汗水。建立一個mixin來處理不一樣瀏覽器的CSS寫法是很簡單的，節省了大量的重複工做和痛苦的代碼編輯。

Sass

?
1
2
3
4
5
6
7
8
9
@mixin border-radius($values) {
   -webkit-border-radius: $values;
      -moz-border-radius: $values;
           border-radius: $values;
}
  
div {
   @ include border-radius( 10px );
}

Less CSS

?
1
2
3
4
5
6
7
8
9
.border-radius(@values) {
   -webkit-border-radius: @values;
      -moz-border-radius: @values;
           border-radius: @values;
}
  
div {
   .border-radius( 10px );
}

Stylus

?
1
2
3
4
5
6
7
8
9
border-radius(values) {
   -webkit-border-radius: values;
      -moz-border-radius: values;
           border-radius: values;
}
  
div {
   border-radius( 10px );
}

編譯結果：

?
1
2
3
4
5
div {
   -webkit-border-radius: 10px ;
      -moz-border-radius: 10px ;
           border-radius: 10px ;
}

3D文本

要生成具備 3D 效果的文本可使用 text-shadows ，惟一的問題就是當要修改顏色的時候就很是的麻煩，而經過 mixin 和顏色函數能夠很輕鬆的實現：

Sass

?
1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin text 3 d($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 ;
}
  
h 1 {
   font-size : 32pt ;
   @ include text 3 d( #0982c1 );
}

Less CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
.text 3 d(@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 ;
   .text 3 d( #0982c1 );
}

Stylus

?
1
2
3
4
5
6
text 3 d(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
   text 3 d( #0982c1 )

生成的 CSS

?
1
2
3
4
5
6
7
8
9
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 ;
}

效果圖：

列 (Columns)

使用數值操做和變量能夠很方便的實現適應屏幕大小的佈局處理。

Sass

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$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;
}

Less CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@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;
}

Stylus

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
}

實際效果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
   margin : 0 auto ;
   width : 1024px ;
}
.content {
   float : left ;
   width : 704px ;
}
.sidebar {
   float : left ;
   margin-left : 20px ;
   width : 300px ;
}

錯誤報告

若是你常常 CSS 你會發現很難找到 CSS 中錯誤的地方，這也是預處理框架的好處，它會報告錯誤，你能夠從這篇文章中學習如何讓 CSS 框架錯誤報告。

註釋

以上三種框架都支持形如 /* */ 的多行註釋以及 // 的單行註釋。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程