20190421-那些年使用過的CSS預處理器（CSS Preprocessor）

寫在前面的亂七八糟的前言：

emmm，不得不說，早上七點是個好時間，公園裏跳廣場舞的大媽，街邊賣菜刀看報的大爺，又不得不說，廣州圖書館是個好地方，該有的安靜，該有的人氣，聽着樓下小孩子的聲音，看着周圍各色各樣的人，emmm好比：無視請勿飲食的標識語正在吃東西的小姐姐，好像是個三明治- -，我不會認可，我也餓了的TAT，老生常談那麼幾句，一直秉承着不只要學會用也要知道用的這些從何處而來，所構成的邏輯及背後的故事，總不能哪天面試官問你，談談你對CSS預處理器的見解，或問，你以爲Sass方便在哪，而後一臉懵逼的雙目對視？真是像極了愛情？emmmm，好的，我皮夠了，下面依舊是從"是什麼/有什麼/爲何"切入。

目錄

一、她從何處來——CSS預處理器的產生

二、她長什麼樣——什麼是CSS預處理器

三、她家幾姐妹——CSS預處理器分類（Sass、Less、Stylus）

四、如何攻略她——CSS預處理器優缺點

五、如何使用她——CSS預處理器的使用

5.1變量

5.2運算

5.3嵌套

5.4註釋

5.5代碼的重用：混合、擴展、函數、插入文件

5.6高級用法：條件語句、循環語句、自定義函數

內容

一、她從何處來——CSS預處理器的產生

既然叫CSS預處理器，確定跟CSS有某些不可描述的故事，CSS是一門非程序式的語言，變量×，函數×，SCOPE（做用域）×，條件語句×，在前期進行界面設計時，須要書寫大量的、無邏輯、不易維護、不易擴展、不易重複調用的代碼，誠然，經驗老道的大佬們都會採用公共類名、各種選擇器等，但對於老夫這種小白emmm，CSS預處理器就是福音吶——

二、她長什麼樣——什麼是CSS預處理器

CSS預處理器的基本思想是：用一種專門的編程語言，爲CSS加入一些編程特性，將CSS做爲目標生成文件，而後開發者只須要使用這種語言進行編碼。在無需考慮瀏覽器兼容性問題的前提下，使用變量/簡單的邏輯程序/函數等在編程語言中的一些基本特性。

三、她家幾姐妹——CSS預處理器分類

目前使用最多的三款CSS預處理器：Sass、Less、Stylus，講真，最後一款，可能由於我還過小白，孤陋寡聞，以至聽都沒聽過，沒使用過沒有發言權，就不種草了。

3.1Sass

Sass產生：2007年，目前爲止，最先最成熟的CSS預處理器，擁有ruby社區與compass框架的支持，受Less影響，已進化到了全面兼容CSS的SCSS

Sass中文網

3.2Less

Less產生：2009年，受Sass影響較大，但又使用CSS語法，簡單易上手，在ruby社區外支持者遠超過Sass，但與Sass相比，編程功能不夠，優勢僅簡單與兼容CSS，但神奇的是：Twitter Bookstrap採用Less作底層語言的。

Less中文網

3.3Stylus

Stylus產生：2010年，來自Node.js社區，主要用於給Node項目進行CSS預處理支持。

四、如何攻略她——CSS預處理器優缺點

4.1優勢

↑開發速度

↑代碼優化效率

代碼更通俗易懂》》維護簡單便捷

通俗一句旁白：Sass與Less就是CSS裏的jQuery

4.2缺點

↓用戶體驗

↓網頁打開速度

須要必定的學習過程

五、如何使用她——CSS預處理器的使用

5.1變量（Variables）

無需重複書寫：將反覆使用的css屬性定義爲變量，而後經過變量名來引用它們

賦予易懂的變量名：讓人一眼看出屬性值用途

5.2運算（Operations）

5.2.1數字運算（Number Operations）

支持數字的加減乘除，取整等（+；-；×；/；%），若必要時會在不一樣單位間轉換值

關係運算（<；>；<=；>=；==；!=）

 ps：除法運算與分割符（/）

/ 在 CSS 中一般起到分隔數字的用途，SassScript 做爲 CSS 語言的拓展固然也支持這個功能，同時也賦予了 / 除法運算的功能

如下三種狀況 / 將被視爲除法運算符號：

• 若是值，或值的一部分，是變量或者函數的返回值
• 若是值被圓括號包裹
• 若是值是算數表達式的一部分

p { font: 10px/8px; // Plain CSS, no division $width: 1000px; width: $width/2; // Uses a variable, does division width: round(1.5)/2; // Uses a function, does division height: (500px/2); // Uses parentheses, does division margin-left: 5px + 8px/2px; // Uses +, does division }

編譯爲

p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px;
}

若是須要使用變量，同時又要確保 / 不作除法運算而是完整地編譯到 CSS 文件中，只須要用#{}插值語句將變量包裹

p { $font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height}; }

編譯爲

p {font: 12px/30px; }

5.2.2顏色運算（Color Operations）

顏色值的運算是分段計算進行的，也就是分別計算紅色，綠色，以及藍色的值

p { color: #010203 + #040506;
} //01 + 04 = 05 02 + 05 = 07 03 + 06 = 09

編譯爲

p {color: #050709; }

但使用color functions比計算顏色值更方便一些

p {color: #010203 * 2;}
//  01 * 2 = 0202 * 2 = 0403 * 2 = 06

編譯爲:

p {color: #020406; }

ps:若顏色值包含 alpha channel（rgba 或 hsla 兩種顏色值），必須擁有相等的 alpha 值才能進行運算，由於算術運算不會做用於 alpha 值

顏色值的 alpha channel 能夠經過opacify或 transparentize兩個函數進行調整

$translucent-red: rgba(255, 0, 0, 0.5); p { color: opacify($translucent-red, 0.3); background-color: transparentize($translucent-red, 0.25);
}

編譯爲

p { color: rgba(255, 0, 0, 0.8); background-color: rgba(255, 0, 0, 0.25);
 }

IE 濾鏡要求全部的顏色值包含 alpha 層，並且格式必須固定 #AABBCCDD，使用 ie_hex_str 函數能夠很容易地將顏色轉化爲 IE 濾鏡要求的格式

$translucent-red: rgba(255, 0, 0, 0.5); $green: #00ff00; div { filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}'); }

編譯爲：

div { filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

5.2.3字符串運算（String Operations）

5.2.4布爾值運算（Boolean Operations）

5.2.5數組運算（List Operations）

使用list functions控制

5.3嵌套（Nested）

5.3.1選擇器嵌套

保留Html中的代碼結構，默認後代選擇器

需子代選擇器，則在子代前加>

&表示上一層

5.3.2屬性嵌套（Nested Properties）

5.3.3僞類嵌套

5.4註釋（Comment）

5.4.1多行註釋/*  */：完整輸出到編譯後文件

5.4.2單行註釋/     /：在非compressed壓縮模式下會被編譯到CSS文件中

5.4.3強調註釋/*! */：在/*後面加一個感嘆號，表示這是"重要註釋"，即便是壓縮模式編譯，也會保留這行註釋，一般能夠用於聲明版權信息

ps：插值語句 (interpolation) 也可寫進多行註釋中輸出變量值：

$version: "1.2.3"; /* This CSS is generated by My Snazzy Framework version #{$version}. */

編譯爲

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

5.5代碼的重用：混合、擴展、函數、插入文件

5.5.1混合（Mixins）

將部分樣式抽出，做爲單獨定義的模板，被多選擇器調用，如某段樣式常常用到多個元素時，需重複寫屢次，則可以使用

5.5.1.1無參混合：聲明：.name{ }；調用：調用選擇器

5.5.1.2帶參混合：

5.5.1.2.1無默認值聲明：.name（@param）{ }  調用：name（parValue）； parValue不可省

5.5.1.2.2有默認值聲明：.name（param：value( )）{ }  調用：name（parValue）； parValue可省

ps：無參混合會在CSS中編譯同名的class選擇器，帶參的不會。

5.5.2擴展（Extand）

5.5.3函數（Function）

5.5.4導入文件（@import）

在CSS中，並不喜歡用@import來導入樣式，由於這樣的作法會增長http的請求。可是在CSS預處理器中的導入(@import)規則和CSS的有所不一樣，它只是在語義上導入不一樣的文件，但最終結果是生成一個CSS文件。若是你是通赤「@import ‘file.css’」導入「file.css」樣式文件，那效果跟普通CSS導入樣式文件同樣。注意：導入文件中定義了變量、混合等信息也將會被引入到主樣式文件中，所以須要避免他們的相互衝突

5.6高級用法：條件語句、循環語句、自定義函數

5.6.1條件語句：@if @else

5.6.2循環語句：@for  @while

5.6.3自定義函數

參考文獻：

【前端】CSS預處理語言總結比較

詳說css與預處理器（以及less、sass、stylus的區別）

阮一峯Sass用法指南

我是無處安放的小結：

如今是16:17分，除去中間吃掉的一個半小時，有點困了，emmm，可是，可是，剛剛手賤的認識了Sass的toolkit——Compass，停不下來了，艾瑪真香，我快哭了。請容我休息一會，再整理補充~

如今是18:04分，本文最重點的部分仍是打算另開一篇，好好盤一番，emmm最重要仍是在怎麼使用它，可是Sass的用法確實比Less高級那麼一丟丟。但願不要太難搞啊~