一、是什么
Css 作為一門標記性語言，語法相對簡單，對使用者的要求較低，但同時也帶來一些問題
需要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利于復用，尤其對于非前端開發工程師來講，往往會因為缺少 Css 編寫經驗而很難寫出組織良好且易于維護的 Css 代碼
Css 預處理器便是針對上述問題的解決方案
預處理語言
擴充了 Css 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 Css 更易維護、方便
本質上，預處理是 Css 的超集
包含一套自定義的語法及一個解析器，根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 Css 文件
二、有哪些
Css 預編譯語言在前端里面有三大優秀的預編處理器，分別是：
sass
2007 年誕生，最早也是最成熟的 Css 預處理器，擁有 Ruby 社區的支持和 Compass 這一最強大的 Css 框架，目前受 LESS 影響，已經進化到了全面兼容 Css 的 Scss
文件后綴名為 .sass 與 scss ，可以嚴格按照 sass 的縮進方式省去大括號和分號
less
2009年出現，受 SASS 的影響較大，但又使用 Css 的語法，讓大部分開發者和設計師更容易上手，在 Ruby 社區之外支持者遠超過 SASS
其缺點是比起 SASS 來，可編程功能不夠，不過優點是簡單和兼容 Css ，反過來也影響了 SASS 演變到了 Scss 的時代
stylus
Stylus 是一個 Css 的預處理框架，2010 年產生，來自 Node.js 社區，主要用來給 Node 項目進行 Css 預處理支持
所以 Stylus 是一種新型語言，可以創建健壯的、動態的、富有表現力的 Css 。比較年輕，其本質上做的事情與 SASS/LESS 等類似
三、區別
雖然各種預處理器功能強大，但使用最多的，還是以下特性：
- 變量（variables）
- 作用域（scope）
- 代碼混合（ mixins）
- 嵌套（nested rules）
- 代碼模塊化（Modules）
因此，下面就展開這些方面的區別
基本使用
less和scss
sass
stylus
嵌套
三者的嵌套語法都是一致的，甚至連引用父級選擇器的標記 & 也相同
區別只是 Sass 和 Stylus 可以用沒有大括號的方式書寫
less
.a {
&.b {
color: red;
}
}
變量
變量無疑為 Css 增加了一種有效的復用方式，減少了原來在 Css 中無法避免的重復「硬編碼」
less 聲明的變量必須以 @ 開頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號 : 分隔開
@red: #c00;
sass 聲明的變量跟 less 十分的相似，只是變量名前面使用 @ 開頭
$red: #c00;
stylus 聲明的變量沒有任何的限定，可以使用 $ 開頭，結尾的分號 ; 可有可無，但變量與變量值之間需要使用 =
在 stylus 中我們不建議使用 @ 符號開頭聲明變量
red = #c00
作用域
Css 預編譯器把變量賦予作用域，也就是存在生命周期。就像 js 一樣，它會先從局部作用域查找變量，依次向上級作用域查找
sass 中不存在全局變量
$color: black;
.scoped {
$bg: blue;
$color: white;
color: $color;
background-color:$bg;
}
.unscoped {
color:$color;
}
編譯后
.scoped {
color:white;/*是白色*/
background-color:blue;
}
.unscoped {
color:white;/*白色（無全局變量概念）*/
}
所以，在 sass 中最好不要定義相同的變量名
less 與 stylus 的作用域跟 javascript 十分的相似，首先會查找局部定義的變量，如果沒有找到，會像冒泡一樣，一級一級往下查找，直到根為止
@color: black;
.scoped {
@bg: blue;
@color: white;
color: @color;
background-color:@bg;
}
.unscoped {
color:@color;
}
編譯后：
.scoped {
color:white;/*白色（調用了局部變量）*/
background-color:blue;
}
.unscoped {
color:black;/*黑色（調用了全局變量）*/
}
混入
混入（mixin）應該說是預處理器最精髓的功能之一了，簡單點來說， Mixins 可以將一部分樣式抽出，作為單獨定義的模塊，被很多選擇器重復使用
可以在 Mixins 中定義變量或者默認參數
在 less 中，混合的用法是指將定義好的 ClassA 中引入另一個已經定義的 Class ，也能夠傳遞參數，參數變量為 @ 聲明
.alert {
font-weight: 700;
}
.highlight(@color: red) {
font-size: 1.2em;
color: @color;
}
.heads-up {
.alert;
.highlight(red);
}
編譯后
.alert {
font-weight: 700;
}
.heads-up {
font-weight: 700;
font-size: 1.2em;
color: red;
}
Sass 聲明 mixins 時需要使用 @mixinn ，后面緊跟 mixin 的名，也可以設置參數，參數名為變量 $ 聲明的形式
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
stylus 中的混合和前兩款 Css 預處理器語言的混合略有不同，他可以不使用任何符號，就是直接聲明 Mixins 名，然后在定義參數和默認值之間用等號（=）來連接
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* 調用error mixins */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* 調用error mixins，并將參數$borderWidth的值指定為5px */
}
代碼模塊化
模塊化就是將 Css 代碼分成一個個模塊
scss 、 less 、 stylus 三者的使用方法都如下所示
@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';
參考文獻
https://mp.weixin.qq.com/s/HUEnnJKJDTp8Vlvu2NfUzA
到此這篇關于Css預編語言及區別詳解的文章就介紹到這了,更多相關Css預編語言內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
