sass和less都是專用於css的預編譯語言，他們2者的功能，操作都是大同小異。less稍微簡單一些，而sass有一些比較成熟的框架（如compass），功能強大一些，其中的語法也比較符合一門程式語言的習慣，比如說函式，作用域，程序控制等等。所以，我也是選擇的sass來使用。
一、sass中文官網
使用：建立乙個scss字尾的檔案。
變數：$name : 定義變數
直接呼叫$name引用變數
巢狀的css規則：
匯入：@import
處理.sass檔案和.scss檔案的相互轉換
sass和scss是sass的兩種不同的語法，我們一般使用scss語法
注釋：// 不會編譯進css檔案
/**/ 會編譯進css檔案
混合器：
@mixin
@include
編譯複雜混合屬性用（如：font，background）
繼承：@extend
佔位選擇符：
#context a%extreme
.notice
#context a.notice注：繼承最好不要繼承被包含的子選擇器，編譯出來後會把包含關係交叉寫的非常複雜，可讀性很差。
流程控制：
@if@if - @else
@if - @else if - @else
@for $var from through ---- 包括開始與結束
@for $var from to ---- 包括開始，不包括結束
@each $var in
@while condition
函式：@function fn(args)
二、less中文文件 略
一款視覺化的前端預處理器語言圖形編譯工具，優點是操作比較簡便，可以批量操作，輕鬆設定各種引數。
2、gulp外掛程式
gulp外掛程式是非常多且功能強大的，其中不乏sass和less的編譯工具。優點是不需要裝新的軟體，而且找起來很方便。缺點是需要自己手寫引數。
預編譯工具語法
if else elseif end then 2 邏輯運算子 優先順序從上到下，括號可改變優先順序 not 當標籤未定義時表示式成立 and 當兩側的標籤都定義時，表示式成立 or 當兩側標籤有乙個定義時，表示式成立 注意，關鍵字無視大小寫。標籤 命名 建議以字串或者下劃線開頭，字母或者數字下劃線...
關於CSS預編譯
背景 大廠的任職要求裡還有一條是 熟悉使用sass.less等css預編譯工具。學習一樣東西的第一步就是首先知道它是什麼 有人開發了一些擴充套件css功能的寫法，比如less,sass,其目的是讓css能支援一些程式語言才有的功能，比如 表示式，函式，變數，迴圈，判斷.有這些功能就能方便重複定義，寫...
CSS預編譯是什麼？
背景 大廠的任職要求裡還有一條是 熟悉使用sass.less等css預編譯工具。學習一樣東西的第一步就是首先知道它是什麼 有人開發了一些擴充套件css功能的寫法，比如less,sass,其目的是讓css能支援一些程式語言才有的功能，比如 表示式，函式，變數，迴圈，判斷.有這些功能就能方便重複定義，寫...