預處理器是一種程序，需要將一種程序的數據轉換成另一種程序的數據。它可以幫助我們編寫可維護的、與時俱進的代碼，也可以減少需要編寫的CSS數量，這些工具對於哪些需要大量樣式表和樣式規則的大型用戶界面是非常有幫助的。
SASS
首先是SASS，擁有多年開元歷史項目。可以說他定義了現代CSS預處理器也不為過。
它的比較實用的語法有：
變量
sass的變量必須是$開頭，后面緊跟變量名，而變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣），如果值后面加上!default則表示默認值。
普通變量：
定義之后可以在全局范圍內使用。
$width:100px;
div{
width:$width;
}
style{
width:$width;
}
默認變量
sass的默認變量僅需要在值后面加上!default即可。
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:1.5;
}
sass的默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可。
這些也是我們用得比較多的語法。
然后下面是我個人認為比較實用，用處比較大的一些總結：
嵌套
選擇器嵌套
所謂選擇器嵌套指的是在一個選擇器中嵌套另一個選擇器來實現繼承，從而增強了sass文件的結構性和可讀性。
在選擇器嵌套中，可以使用&表示父元素選擇器，示例如下：
//sass style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
}
}
//css style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_nav li{
float:left;
}
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_nav a:hover{
color:#ddd;
}
屬性嵌套
所謂屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。由於本人不是很喜歡這個功能，感覺需要用到這方法比較少。就不在這里介紹了。
混合(mixin)
sass中使用@mixin聲明混合，可以傳遞參數，參數名以$符號開始，多個參數以逗號分開，也可以給參數設置默認值。聲明的@mixin通過@include來調用。
無參數mixin
//sass style
//-------------------------------
@mixin center-block {
margin-left:auto;
margin-right:auto;
}
.demo{
@include center-block;
}
//css style
//-------------------------------
.demo{
margin-left:auto;
margin-right:auto;
}
有參數mixin
//sass style
//-------------------------------
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
//css style
//-------------------------------
.opacity{
@include opacity; //參數使用默認值
}
.opacity-80{
@include opacity(80); //傳遞參數
}
多個參數mixin
調用時可直接傳入值，如@include傳入參數的個數小於@mixin定義參數的個數，則按照順序表示，后面不足的使用默認值，如不足的沒有默認值則報錯。除此之外還可以選擇性的傳入參數，使用參數名與值同時傳入。
//sass style
//-------------------------------
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
@include horizontal-line($padding:15px);
}
//css style
//-------------------------------
.imgtext-h li {
border-bottom: 1px solid #cccccc;
padding-top: 10px;
padding-bottom: 10px;
}
.imgtext-h--product li {
border-bottom: 1px dashed #cccccc;
padding-top: 15px;
padding-bottom: 15px;
}
繼承
sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞@extend，后面緊跟需要繼承的選擇器。
//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
Less.js
(我們常常簡稱 "Less")，現在最為流行的CSS預處理器之一。Sass強有力的競爭者。less需要在Node.js環境使用。
其中一個通用特征是mixins,在 Less 中，你可以使用類.class和.button-checkout-process來實現mixins屬性。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
.button {
display
: inline-
block
;
width
:
80%
;
max-width
:
200px
;
border-radius:
5px
;
background-color
:
black
;
color
:
white
;
font-size
:
14px
;
margin
:
5px
;
padding
:
8px
;
}
.button-checkout- process {
.button();
/* Mixin */
background-color
:
silver
;
}
|
Stylus
Stylus是功能豐富的CSS擴展，有60多種自定義函數，包括saturation()，可以推算適配CSS飽和顏色。
Stylus 可以省略花括號({}), 冒號 (:), 分號 (;)，或者直接使用純CSS。
下面來個例子：
|
1
2
3
4
|
.button
display inline-
block
border-color saturation(
#000
,
50%
)
border-radius
5px
|
上面的例子等效於：
|
1
2
3
4
5
6
7
|
.button {
display
: inline-
block
;
border-color
:
#959595
;
-webkit-border-radius:
5px
;
-moz-border-radius:
5px
;
border-radius:
5px
;
}
|