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;
}
  

   
1
   
2
   
3
   
4
  

這是一個再普通不過的，不過 Sass 同時也支援老的語法，就是不包含花括號和分號的方式：

/* style.sass */
h1
  color: #0982c1
  

   
1
   
2
   
3
  

而 Stylus 支援的語法要更多樣性一點，它預設使用 .styl 的副檔名，下面是 Stylus 支援的語法：

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

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

/* omit colons and semi-colons */
h1
  color #0982C1
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
   
9
   
10
   
11
   
12
  

可以在同一個樣式單中使用不同的變數，例如下面的寫法也不會報錯：

h1 {
  color #0982c1
}
h2
  font-size: 1.2em
  

   
1
   
2
   
3
   
4
 

   
5
  

3.變數

1. sass：

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

     sass變數必須是以$開頭的，然後變數和值之間使用冒號（：）隔開，和css屬性是一樣的，例如：

  

   
1
   
2
  

$maincolor : #092873;
$siteWidth : 1024px;
$borderStyle : dotted;
body {
  color: $maincolor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
  

2.less css ：

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

 Less css中變數都是用@開頭的，其餘與sass都是一樣的，例如：

  

   
1
   
2
  

@maincolor : #092873;
@siteWidth : 1024px;
@borderStyle : dotted;
body {
  color: @maincolor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
  

3.stylus：

 stylus對變數是沒有任何設定的，可以是以$開頭，或者任何的字元，而且與變數之間可以用冒號，空格隔開，
 但是在stylus中不能用@開頭，例如：    

  

   
1
   
2
   
3
  

maincolor = #092873
siteWidth = 1024px
borderStyle = dotted
body 
  color maincolor
  border 1px borderStyle mainColor
  max-width siteWidth
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
  

以上三種寫法都如同一下這種css：

body {
  color: #092873;
  border: 1px dotted #092873;
  max-width: 1024px;
}
  

   
1
   
2
   
3
   
4
   
5
  

這樣做的好處也是顯而易見的，在修改多處相同顏色的時候，這時就只需要修改變數值即可。

4.巢狀

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

div {
  margin: 10px;
}
div nav {
  height: 25px;
}
div nav a {
  color: #0982C1;
}
div nav a:hover {
  text-decoration: underline;
}
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
   
9
   
10
   
11
   
12
  

如果用 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; 
}
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
   
9
   
10
   
11
   
12
   
13
   
14
   
15
   
16
   
17
   
18
   
19
   
20
   
21
   
22
   
23
   
24
   
25
   
26
   
27
   
28
   
29
  

這樣做是非常方便的，也很直觀。

5.運算子

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

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 80 * 10%;
}
  

   
1
   
2
   
3
   
4
   
5
  

在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%); 
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
  

例項如下：

$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);
}
  

   
1
   
2
   
3
   
4
   
5
  

2.Less css顏色處理函式：

lighten(@color, 10%); 
darken(@color, 10%);  
saturate(@color, 10%);  
desaturate(@color, 10%); 
spin(@color, 10); 
spin(@color, -10); 
mix(@color1, @color2);
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
  

示例如下：

@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}
  

   
1
   
2
   
3
   
4
   
5
  

3.Stylus顏色處理函式：

lighten(color, 10%); 
darken(color, 10%);  
saturate(color, 10%);  
desaturate(color, 10%); 
  

   
1
   
2
   
3
   
4
  

示例如下;

color = #0982C1 
h1
  background color
  border 3px solid darken(color, 50%)
  

   
1
   
2
   
3
   
4
  

7.匯入 (Import)

很多 CSS 開發者對匯入的做法都不太感冒，因為它需要多次的 HTTP 請求。但是在 CSS 前處理器中的匯入操作則不同，它只是在語義上包含了不同的檔案，但最終結果是一個單一的 CSS 檔案，如果你是通過 @ import “file.css”; 匯入 CSS 檔案，那效果跟普通的 CSS 匯入一樣。

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

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

   
1
   
2
   
3
   
4
   
5
  

2.XXX:

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

p {
  background: #092873;
}
  

            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
CSS 前處理器技術已經非常的成熟了，而且也湧現出了越來越多的 CSS 的前處理器框架。本文便總結下 Sass、Less CSS、Stylus這三個前處理器的區別和各自的基本語法。
     
  
 
   CSS 前處理器技術已經非常的成熟了，而且也湧現出了越來越多的 CSS 的前處理器框架。本文便總結下 Sass、Less CSS、Stylus這三個前處理器的區別和各自的基本語法。 
  1.什麼是 CSS 前處理器 
  CSS 前處理器是一種語言用來為 CSS 增加一些程式設計的的特性，無需 

  
 

    

    
    
Linux中set,env和export這三個命令的區別
     
 
                

Linux中set,env和export這三個命令的區別


set命令顯示當前shell的變數，包括當前使用者的變數;


env命令顯示當前使用者的變數;


export命令顯示當前匯出成使用者變數的shell變數。


    每個shell有自己特有的變數（se 

  
 

    

    
    
13.Java的finalize，finally，final三個關鍵字的區別和應用場景
     
 
								
								            
						
                （1）final：可以作為修飾符修飾變數、方法和類，被final修飾的變數只能一次賦值；被final修飾的方法不能夠在子類中被重寫（override）；被final修飾的類不能夠被繼承。 （2）fina 

  
 

    

    
    
自從用了RecyclerView，腰再也不痛了，手也不酸了
     
 
                RecyclerView是support:recyclerview-v7中提供的控制元件，最低相容到android 3.0版本。官方介紹RecyclerView為在有限的視窗展現大量資料的控制元件。擁有類似功能的控制元件有ListView、GridView以及被Google遺 

  
 

    

    
    
阿里巴巴的程式設計師天團組團出道了，我不禁笑出了聲音
     
 
                這個程式設計師天團實事求是1就是1 0就是0身上流露出來的那種騷氣是很逼人的最近，在杭州的朋友，如果路過杭州地鐵市民中心站廳，應該會看到站內一面牆上，投放的這組群像海報。海報上的這群人，他們都有一個共同的名字——“程式設計師”。以前在外界眼裡，提起程式設計師，很多人對這個群體 

  
 

    

    
    
Android-LayoutInflater中inflate方法兩個引數和三個引數的區別
     
 
                

關於inflate引數問題，我想很多人多多少少都瞭解一點，網上也有很多關於這方面介紹的文章，但是枯燥的理論或者翻譯讓很多小夥伴看完之後還是一臉懵逼，so，我今天想通過三個案例來讓小夥伴徹底的搞清楚這個東東。本篇部落格我們不講原始碼，只看使用。原始碼的解讀會在下一篇博文中帶 

  
 

    

    
    
三個案例帶你看懂LayoutInflater中inflate方法兩個引數和三個引數的區別
     
 
                關於inflate引數問題，我想很多人多多少少都瞭解一點，網上也有很多關於這方面介紹的文章，但是枯燥的理論或者翻譯讓很多小夥伴看完之後還是一臉懵逼，so，我今天想通過三個案例來讓小夥伴徹底的搞清楚這個東東。本篇部落格我們不講原始碼，只看使用。原始碼的解讀會在下一篇博文中帶來。 

  
 

    

    
    
js中兩個等號(==)和三個等號(===)的區別
     
 
                
js中兩個等號(==)和三個等號(===)的區別：
1. "=="表示：equality -> 等同  的意思，"=="使用兩個等號時，如果兩邊值的型別不同的時候，是要先先進行型別轉換後，才能做比較。
2. "==="表示：identity -> 恆等 的意思， 

  
 

    

    
    
java中 一個等於號和兩個等於號三個等號的區別？
     
 
                一個等號是賦值號，兩個等號是判斷號。賦值表示把右邊的值或引用賦給左邊的變數，判斷號表示返回符號兩邊的值是否相等，這裡的值包括引用。相等運算子"==",如果兩個運算元不是同一型別，則會先嚐試轉換型別在進行比較。嚴格相等運算子“==="首先計算其運算元的值，然後比較這兩個值，比較 

  
 

    

    
    
JS/JavaScript中兩個等號 == 和 三個等號 === 的區別
     
 
								
								            
						
                

JavaScript中兩個等號 == 和 三個等號 === 的區別


一、概念 == 和 === 


(1)  "=="叫做相等運算子，"==="叫做嚴格運算子。

(2) ==，equalit 

  
 

    

    
    
請問sprintf、fprintf和printf這三個函式有什麼區別？
     
 
                
都是把格式好的字串輸出，只是輸出的目標不一樣：
1 printf，是把格式字串輸出到標準輸出（一般是螢幕，可以重定向）。
2 sprintf，是把格式字串輸出到指定字串中，所以引數比printf多一個char*。那就是目標字串地址。
3 fprintf， 是把格式字串輸出到 

  
 

    

    
    
學習大數據這三個關鍵技術是一定要掌握！
     
 基礎   搜索引擎   一個   mapr   組件   取數據   跟蹤   對數   指令   　　學習大數據這三個關鍵技術是一定要掌握！
　　大數據時代全面來臨，大數據、人工智能等技術引領科技創新潮流，獲得國家政策大力支持，前景廣闊。學習大數據技術的人自然是絡繹不絕，但千鋒老師提醒你：學習大數據雖然是一 

  
 

    

    
    
String、toString、String.valueOf()三個有啥區別？
     
 keyword   判斷   line   機制   希望   我也在   bsp   長時間   得到   今天在使用這個的時候發現，他們三者好像在某些場所都是可以用的，但是不免會讓人想到那既然它們三者這麽的相似，那麽總有些什麽區別吧。我也在網上找了一些資料看。自己也看了API文檔，就將他們三的區別總結一下 

  
 

    

    
    
《惢客創業日記》2018.09.14 週五 “不甘心”這三個字，讓他去了美團。
     
  
 
 　　今天，有一個8年前的同事加我微信好友，真是感謝自己的手機號一直沒變，還能讓想找我的同事找到我。雖然只在微信裡簡單的聊了十幾句，聊的也只是扒一扒曾經一起共事的經歷和彼此的境遇，但是這種“知己重逢”的欣喜感始終沒有消褪，且彼此都感覺到雙方都在為自己心中的那個小小“不甘心”默默打拼。如今，他在上海美團 

  
 

    

    
    
jquery中val(),text(),html()三個方法的區別
     
  
 
 三個方法都是jquery中用於獲取或者設定內容 
 （1）val()主要針對的物件是表單元素（input）的value屬性 
 <input id="valtest" type="text" value="我是val()">，通過$("#valtest").val()獲取到"我是val( 

  
 

    

    
    
這三個網站太強大了，沒有找不到的資源
     
  
 
 不知道大家有沒有這樣的經歷。想搜尋某一樣東西的時候，開啟一款搜尋引擎，經過長時間的瀏覽，得到的結果卻不如人意。今天就告訴大家這三款神奇又好用的搜尋資源網站，讓你沒有找不到的資源。 
   
 一、Google 
  
  www.google.cn 
  
  
   
 一款可 

  
 

    

    
    
【PHP面向物件】介面跟抽象類的區別和各自的用法
     
  
 
 
 author：咔咔 
 wechat：fangkangfk 
   
 介面： 
 介面是用interface宣告的 
 介面中定義的方法都是公共的 
 介面只需要宣告自定義方法不需要具體內容 
 實現介面使用implements實現，介面支援多實現，使用逗號隔開即可 
 繼承介面的類 

  
 

    

    
    
網站建設設計|這三個基本要求你需要重點掌握！
     
 做什麼事情都要有一定的基本尺度來衡量自己，當然，在網站建設設計過程中，我們應該需要衡量網站製作基本標準，那網站建設到底應該符合什麼樣的標準呢?又有哪些標準可以使網站建設得更為完善呢?下面，一起來了解網站建設的三個基本要求! 
 
　　一、要求網站開啟的速度要快 
　　在當今社會人們生活的節奏不斷加快，，畢竟這 

  
 

    

    
    
【網站製作設計】建議這三個基本要求你一定要掌握！
     
 做什麼事情都要有一定的基本尺度來衡量自己，當然，在網站製作設計過程中，我們應該需要衡量網站製作基本標準，那網站建設到底應該符合什麼樣的標準呢?又有哪些掌握哪些可以使網站製作得更為完善呢?下面，我們重點一起來了解網站建設的三個基本要求!　　一、要求網站開啟的速度要快 
　　在當今社會人們生活的節奏不斷加快，，畢 

  
 

    

    
    
【網站制作設計】建議這三個基本要求你一定要掌握！
     
 ews   網絡   ext   哪些   註意   重點   競爭力   競爭   適合   做什麽事情都要有一定的基本尺度來衡量自己，當然，在網站制作設計過程中，我們應該需要衡量網站制作基本標準，那網站建設到底應該符合什麽樣的標準呢?又有哪些掌握哪些可以使網站制作得更為完善呢?下面，我們重點一起來了解網站