這篇文章是初步介紹css預處理的，詳細學習請移步官網~

sass中文文檔：https://www.sass.hk/docs

less中文文檔：http://lesscss.cn/

什么是css預處理器

CSS 預處理器是一種語言。

用通俗易懂的話來說就是“用一種專門的編程語言，進行 Web 頁面樣式編寫，再通過編譯器轉化為正常的 CSS 文件”，無需考慮瀏覽器的兼容性問題。

可以在 CSS 中使用變量、簡單的程序邏輯、函數等等，可以讓你的 CSS 更加簡潔，適應性更強，代碼更直觀等諸多好處。

?

但CSS預處理器也不是萬金油，原生CSS的好處在于簡便、隨時隨地被使用和調試。

使用預處理器的話有預編譯CSS步驟的加入，讓我們開發工作流中多了一個環節，調試也變得更麻煩了。更大的問題在于，預編譯很容易造成后代選擇器的濫用。

所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，CSS預處理器有沒有解決更大的麻煩。

Less和Sass

以下概念以sass為例講解，less中一樣的。

變量：

$width: 5em; //直接使用即調用變量： #main {width: $width; }

編譯為：

#main {width: 5em; }

混合（Mixins）：定義好一個基本樣式，在需要的選擇器中引用。

//定義要引用的樣式： @mixin指令后添加名稱與樣式 @mixin large-text {color: #ff0000; } //引用混合樣式：@include 指令后添加名稱 .page-title {@include large-text;padding: 4px;margin-top: 10px; }

上面代碼編譯為：

.page-title {color: #ff0000;padding: 4px;margin-top: 10px; }

參數混合（Parametric）：

帶參數的混合，像函數一樣定義一個參數的默認值、或者參數屬性集合

@mixin sexy-border($color, $width) {//參數：$color, $widthborder: {color: $color;width: $width;style: dashed;} } p { @include sexy-border(blue, 1in); }

編譯為：

p {border-color: blue;border-width: 1in;border-style: dashed; }

嵌套規則（Nested Rules）：

將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器。避免了重復輸入父選擇器

#main p {//父選擇器color: #00ff00;width: 97%;.redbox {//子選擇器background-color: #ff0000;color: #000000;} }

編譯為：

#main p {color: #00ff00;width: 97%;
}
#main p .redbox {background-color: #ff0000;color: #000000;
}

運算（Operations）：在CSS中使用加、減、乘、除進行數學運算，主要運用于屬性值和顏色的運算，可以輕松實現屬性值之間的復雜關系。

p {$width: 1000px;width: $width/2; // Uses a variable, does divisionheight: (500px/2); // Uses parentheses, does divisionmargin-left: 5px + 8px/2px; // Uses +, does division }

編譯為:

p {width: 500px;height: 250px;margin-left: 9px;
}

顏色功能（Color function）：顏色的函數運算，可以編輯你的顏色，顏色會先被轉化成HSL色彩空間，然后在通道級別操作。

命名空間（Namespaces）：樣式分組，即將一些變量或者混合模塊打包封裝，從而方便被調用，更好的組織CSS和屬性集的重復使用。

作用域（Scope）：局部修改樣式，先從本地查找變量或者混合模塊，如果沒有找到的話就會去父級作用域中查找，直到找到為止，這一點和其他程序語言的作域非常的相似。

JavaScript表達式(Javascript evaluation)：在CSS樣式中使用Javascript表達式賦值。

上面八條在LESS和Sass中是一個很重要的概念，只有把上面的概念理解清楚了，才能更好的學習LESS和Sass。

?

Less和Sass之間的主要區別是他們的實現方式不同：

　　LESS是基于JavaScript運行,需要引入Less.js來處理代碼輸出css到瀏覽器，所以LESS是在客戶端處理。

　　Sass是基于Ruby的，需要安裝Ruby環境，是在服務器端處理的。

?

很多開發者不選擇LESS是因為LESS輸出修改過的CSS到瀏覽器需要依賴于Javascript引擎，而Javascript引擎需要額外的時間來處理代碼。

解決：

比如只在開發環節使用LESS。開發完成，復制粘貼LESS輸出的到一個壓縮器，然后到一個單獨的CSS文件來替代LESS文件。

另一種方式是使用LESS APP來編譯和壓縮你的LESS文件。

兩種方式都將是最小化你的樣式輸出，從而避免由于用戶的瀏覽器不支持Javascript而可能引起的任何問題。盡管這不大可能，但終歸是有可能的。

?

Sass確實需要在Ruby上運行,然而他不需要在服務器上編譯CSS。它也可以在本地編譯（正如前面提到的LESS）,編譯后的CSS可以運用到你的項目上，Wordpress主題中，引擎模板，或者任何服務器，就像你的CSS文件。Mac也默認提供了對Sass的安裝和支持，只需要一行命令就可以（sudo gem install sass）。

如果你安裝了Sass，你在本地就可以將Sass轉譯成CSS，并將轉譯的代碼用到你的項目中。如果你還不知道如何安裝Sass(或者Compass)，我們也寫了一份詳細的指南Getting Started with Sass and Compass，可以很好的幫你清除這個障礙。

使用

首先 Sass 和 Less 都使用的是標準的 CSS 語法，因此你可以很方便的將已有的 CSS 代碼轉為預處理器代碼， Less 使用 .less 擴展名

Sass 有兩種語法格式：

使用 “花括號” 表示屬性屬于某個選擇器，“分號” 分隔屬性，這種格式以 .scss 作為拓展名。

另一種簡化格式：使用 “縮進” 代替 “花括號” 表示屬性屬于某個選擇器，用 “換行” 代替 “分號” 分隔屬性，這種格式以 .sass 作為拓展名。

技巧收集

使用混合簡化html的class數量，比如下面這個例子，本來寫.border和.post 兩個class，使用引用，就只寫.post。而且ul也可以共享這個.border的樣式，減少重復代碼

.border {border-top: 1px dotted #333; }article.post {background: #eee;.border; }ul.menu {background: #ccc;.border; }

混合的另一種模式：選擇器繼承（less沒有），無需再使用逗號

.menu {border: 1px solid #ddd; } .footer {@extend .menu; } /* 上面的規則和下面的規則是一樣的效果 */ .menu, .footer {border: 1px solid #ddd; }

sass的混合寫法

//定義
@mixin error($borderWidth: 2px) {border: $borderWidth solid #F00;color: #F00; }
//使用
.generic-error {
? padding: 20px;
? margin: 4px;
? @ include error(); /* Applies styles from mixin error */
}

針對瀏覽器私有前綴的樣式，使用參數混合非常有用

.border-radius( @radius: 3px ) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius; }

div {
? .border-radius(10px);
}

使用運算，在基礎樣式做數學運算實現其他樣式。比如統計頁面的border寬度有哪幾種，然后定義個基礎的border變量，其余border在此基礎做運算

@base_border_width: 2px; .error {
? border: @base_border_width*2 solid #F00;
? color: #F00;
}

使用嵌套規則，減少寫父級元素名的代碼量或者減少選擇器層級。也可以組件實現對應，方便管理。

//糟糕的多次寫section section {margin: 10px; } section nav {height: 25px; } section nav a {color: #0982C1; } section nav a:hover {text-decoration: underline; }

使用嵌套后

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

減少層級。下面的h2在原生的css中選擇器為：#site-body .post .post-header h2。下面這一整個可以是一個組件的樣式

#site-body { ….post { ….post-header { …h2 { … }a { …&:visited { … }&:hover { … }}}} }

?

轉載于:https://www.cnblogs.com/yaoyao-sun/p/10393900.html

總結

以上是生活随笔為你收集整理的初识css预处理器：Sass、LESS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。