CSS預處理器

css預處理器為css增加了程式設計的特性，如使用變數，簡單的邏輯程式，函式等，再編譯成css檔案，供專案使用。好處：簡潔，適應性強，可讀性強，易於**維護。

變數sass宣告變數 $變數名：變數值

$maincolor:#943

;//宣告變數   
color: $maincolor;
// 使用變數

@maincolor:#943

;//宣告變數     
color: @maincolor;
// 使用變數

$maincolor = #943

;   maincolor = #943
;//宣告變數     
color: $maincolor;  color: maincolor // 使用變數

注意:如果我們使用「@」符號開頭來宣告（0.22.4）變數，stylus會進行編譯，但其對應的值並不會賦值給變數。換句話說，在stylus中不要使用「@」符號開頭宣告變數。

mixins可以將一部分樣式抽出，作為單獨定義的模組，被很多選擇器重複使用。minxins被當做乙個公認的選擇器，還可以在mixins中定義變數或者預設引數。

sass的mixins

/*宣告乙個mixin叫作「error」*/

@mixin error
($borderwidth:
2px)
/*使用 @include 呼叫error mixins*/
.generic-error 
.login-error

將mixins看成是乙個類選擇器

/*宣告乙個mixin叫作「error」*/

.error
(@borderwidth:
2px)
/*呼叫error mixins*/
.generic-error 
.login-error

不使用符號，直接宣告

/*宣告乙個mixin叫作「error」*/

error
(borderwidth=
2px)
/*呼叫error mixins*/
.generic-error 
.login-error

sass中沒有全域性變數概念

stylus,less可以支援全域性和區域性變相，會向上級查詢，找到根為止

巢狀通過選擇器的巢狀來實現繼承，減少**量，增加可讀性

巢狀 ，& 引用父選擇器，

繼承sass,stylus的繼承：把乙個選擇器中的樣式繼承到另乙個選擇器上，使用@extend

.block 

p

不是在選擇器上繼承，而是將mixins中的樣式巢狀到每個選擇器裡面。缺點:每個選擇器中都會有重複的樣式產生。

.block 

p

less:

@full_page:

960px;
@half_page: @full_page /
2;

匯入css中 @import 匯入樣式會增加http請求

@import

"reset.css"

持續更新中~

css預處理器

css預處理定義了一種新的語言，其思想是一種專門的程式語言，為css增加了一些程式設計的特性。將css作為目標生成檔案。開發者可以使用這種語言進行編碼工作。css預處理器是一種專門的程式語言，進行web頁面樣式設計，然後再編譯成正常的css檔案，以供專案使用。css預處理器為css增加了一些程式設計...

CSS預處理器

什麼是css預處器？css 預處理器用一種專門的程式語言，進行 web 頁面樣式設計，然後再編譯成正常的 css 檔案，以供專案使用。css 預處理器為 css 增加一些程式設計的特性，無需考慮瀏覽器的相容性問題 sass sass 是採用 ruby 語言編寫的一款 css 預處理語言，它誕生於20...

css預處理器

sass less是什麼？大家為什麼要使用他們？他們是css預處理器。他是css上的一種抽象層。他們是一種特殊的語法 語言編譯成css。less是一種動態樣式語言.將css賦予了動態語言的特性，如變數，繼承，運算，函式.less 既可以在客戶端上執行 支援ie 6 webkit,firefox 也可...