如果時間退到2年前,那么CSS預(yù)處理是非掣钜裕火的.
CSS預(yù)處理器: 基于CSS的另一種語言.
通過工具譯成CSS
添加了很多CSS不具備的特性
能提升CSS文件的組織
常見的預(yù)處理器: less(基于Node.js) sass(新版本是scss)
less優(yōu)勢是: 用js寫的,編譯比較快.并且有瀏覽器中可以直接使用的一個版本.不需要預(yù)先編譯.
sass是用ruby寫得,編譯起來比較慢.
CSS預(yù)處理器到底提供哪些功能?
嵌套 - 反應(yīng)層級和約束.
變量和計算 - 減少重復(fù)代碼
Extend和Mixin - 代碼片段 (如果一段代碼需要不斷用的時候就可以提取成一個代碼片段,就像js的函數(shù)一樣)
循環(huán) - 適用于復(fù)雜有規(guī)律的樣式(比如表格)
import -CSS文件模塊化
less實例
安裝完成以后,文件下會多出: node_modules目錄 和 package-lock.json 文件.
解讀嵌套代碼
.wrapper .nav { font-size: 12px; }
.wrapper . content:hover { background : red; }
使用less
z.less
.wrapper {
background : red;
.content {
font-size : 560px;
height : 50px;
}
.main {
font-size : 50px;
&:hover {
background : yellow;
}
}
}
彬@TB MINGW64 /z/全面系統(tǒng)講解CSS 工作應(yīng)用+面試一步搞定
$ ls
i29u8p/ '第11章 課程總結(jié)'/ '第6章 CSS動畫'/
node_modules/ '第1章 課程介紹'/ '第7章 預(yù)處理器'/
package-lock.json '第2章 HTML基礎(chǔ)強化'/ '第8章 Bootstrap'/
project.zip '第3章 CSS基礎(chǔ)'/ '第9章 CSS工程化方案'/
z.less '第4章 CSS布局'/
'第10章 三大框架中的CSS'/ '第5章 CSS效果'/
彬@TB MINGW64 /z/全面系統(tǒng)講解CSS 工作應(yīng)用+面試一步搞定
$ ./node_modules/.bin/lessc z.less // **重要命令**
.wrapper {
background: red;
}
.wrapper .content {
font-size: 560px;
height: 50px;
}
.wrapper .main {
font-size: 50px;
}
.wrapper .main:hover {
background: yellow;
}
彬@TB MINGW64 /z/全面系統(tǒng)講解CSS 工作應(yīng)用+面試一步搞定
在git命令里面執(zhí)行#: ./node_modules/.bin/lessc z.less
編譯成css文件并輸出為z.css于當(dāng)前目錄 ./node_modules/.bin/lessc z.less>z.css
less給我們提供了很多的運算函數(shù).變量
@fontSize :12px;
@bgColor : red;
background:lighten(@bgColor,40%); //變淺40%;
font-size : @fontSize + 20px; //字體大小增加20px;
示例
變量不能亂用,要有規(guī)劃. 變量是less和sass提供我們非常好的一個特性.
less的Mixin的使用
.block(@fontSize) {
font-size : @fontSize;
border : 1px solid #ccc;
border-radius : 4px;
}
.wrapper {
background : red;
.content {
font-size : 560px;
height : 50px;
.block(@fontSize); //引用Mixin
}
.main {
font-size : 50px;
.block(@fontSize); //引用Mixin
}
}
less的Extend的使用, mixin與extend區(qū)別是,mixin直接復(fù)制過來,而extend是提取公共,特殊再寫.
它的主要優(yōu)點是用于簡單的,并且聲稱的css文件要小.
但是我感覺css文件再大也是非常小的.可以忽略,我更傾向于mixin,因為更直觀.
less的loop
less本身是沒有循環(huán)的,我們可以用遞歸方法模仿循環(huán).
when 后面是一個出口,當(dāng) (@n > 0) 的時候不再執(zhí)行
sass安裝(局部安裝)
#: npm install node-sass
#: npm install node-sass -g //全局安裝
sass的文件后綴是scss
z.scss
編譯
./node_modules/.bin/node-sass z.scss
./node_modules/.bin/node-sass z.scss>z.css //這個輸出的css是嵌套結(jié)構(gòu).
./node_modules/.bin/node-sass --output-style expanded z.scss>z.css //這個輸出的css文件被打平.
sass變量 計算 與less區(qū)別,less的變量符號是@,sass的變量符號是$
$fontSize :12px;
$bgColor : red;
background:lighten($bgColor,40%); //變淺40%;
font-size : $fontSize + 20px; //字體大小增加20px;
為什么它們2個的變量不好不一樣?
因為less的理念是盡量的接近css的語法.
sass理念是,既然我和css是不兼容的,盡量的避免產(chǎn)生混淆.
scss的Mixin
scss的Mixin和less的區(qū)別就是scss前面必須加 @mixin 并且不用加點
@mixin block($fontSize) {
font-size : $fontSize;
border : 1px solid #ccc;
border-radius : 4px;
}
//調(diào)用
.wrapper {
background : red;
.content {
font-size : 560px;
height : 50px;
@include block($fontSize); //引用Mixin
}
.main {
font-size : 50px;
@include block($fontSize); //引用Mixin
}
}
scss的extend可以參考less的extend
scss的loop方式模擬循環(huán)
CSS預(yù)處理器框架
在SASS中有--- Compass
在Less中有--- Lesshat(國外)/EST(國內(nèi))
它們提供現(xiàn)成的mixin
類似于JS類庫 封裝常用的功能
可以自行去學(xué)習(xí)一下CSS預(yù)處理框架.EST地址
http://ecomfe.github.io/est/#top
面試題:
因為CSS預(yù)處理器并不是CSS基本要求的,因此在面試的時候并不會以重點來考察.
- 常見的CSS預(yù)處理器: Less(node.js寫的) / Sass(ruby寫的,有Node版本)
- 預(yù)處理器的作用:幫助更好的組織代碼,提高代碼效率,提升可維護性.
- 預(yù)處理器的能力:
嵌套 - 反應(yīng)層級
變量 計算 - 減少重復(fù)代碼
Extend/Mixin - 代碼塊
循環(huán) - 適用于復(fù)雜有規(guī)律的代碼
import - CSS文件模塊化 - 預(yù)處理器的優(yōu)缺點
優(yōu)點:提高代碼復(fù)用率和可維護性
缺點:需要引入編譯過程,有學(xué)習(xí)成本.
