常見(jiàn)CSS預(yù)處理器：Less / SASS / Stylus等一姿。
Less預(yù)處理器：使用CSS語(yǔ)法，可以做一些邏輯處理跃惫，可以使用變量叮叹、混合、運(yùn)算爆存、嵌套等蛉顽。簡(jiǎn)化CSS的編寫，降低了CSS等維護(hù)成本先较。
1.安裝及使用
1）VSCode插件（推薦）
在VSCode中安裝插件Easy LESS携冤。可以自動(dòng)把less文件轉(zhuǎn)換成css文件闲勺，保存less文件后自動(dòng)更新曾棕。
2）Node
安裝Node環(huán)境：（Mac版）
檢測(cè)Node是否安裝成功
在終端中輸入：
node -v? ? ? ? ??node環(huán)境是否安裝成功(如果安裝成功,會(huì)出現(xiàn)版本號(hào))
npm -v? ? ? ? ? ?檢測(cè)包管理工具是否安裝成功(如果安裝成功,會(huì)出現(xiàn)版本號(hào))
如圖。
安裝less
在終端輸入：
npm install less -g
驗(yàn)證less是否安裝成功
lessc -v
將less編譯為css文件
在終端輸入：
（首先要進(jìn)入到當(dāng)前l(fā)ess文件所在的文件夾目錄中）
編譯less文件cmd命令: lessc 要被編譯的less文件 要編譯為自定義CSS文件
例如:? lessc? index.less? index.css
2.Less
1）使用
less文件中可以寫css代碼菜循。語(yǔ)法：@變量名: 值;
調(diào)用：@變量名
@fsize: 18px;? ? ?//把18px存在@fsize記號(hào)中?
div {
? ? font-size: @fsize;? ? //調(diào)用?
}
2）運(yùn)算
運(yùn)算符號(hào)：+ - * /
@w:120px;
div {
? width: @w / 2;
}
3）嵌套
less中樣式可以嵌套翘地，保存后會(huì)自動(dòng)生成css代碼。less代碼舉栗：
div {
? width: 120px;
? height: 120px;
? a {
? ? width: 100%;
? ? height: 100%;
? ? display: block ;
? ? span {
? ? ? font-size:18px;
? ? }
? }
}
生成的css代碼：
div {
? width: 120px;
? height: 120px;
}
div a {
? width: 100%;
? height: 100%;
? display: block ;
}
div a span {
? font-size: 18px;
}
4）混合（函數(shù)的使用）
定義函數(shù)：把一段相同的代碼交給一個(gè)函數(shù)來(lái)管理
.public() {? ? ? //定義函數(shù)
? width: 400px;
? height: 500px;
? background: red;
}
div {
????.public();? ? // 調(diào)用函數(shù)
}
p {
????.public();
}
.public();也可以換成#public();，但后面調(diào)用也要用#public();
傳參數(shù)：
.public(@w) { }? ?// 小括號(hào)中的@w相當(dāng)于假設(shè)有了具體的值
//@w 表示假設(shè)的寬度, @h 表示假設(shè)的高度
.public(@w,@h) {
? width:@w;
? height: @h;
? background: red;
}
div {
? .public(600px,300px);? ?// 調(diào)用
}
p {
? .public(400px,100px);
}
參數(shù)的順序 和 調(diào)用的實(shí)際值 是一一對(duì)應(yīng)的子眶。
函數(shù)參數(shù)的默認(rèn)值：
.public(@w:默認(rèn)值,@h:默認(rèn)值...){}
.public(@w:400px,@h:400px) {
? width:@w;
? height: @h;
? background: red;
}
div {
? .public(600px,300px);? // 調(diào)用瀑凝，寬高為600px，300px
}
p {
? .public();? //沒(méi)有傳參臭杰，寬高為默認(rèn)的400px粤咪，400px
}
5）引入less文件
? <!-- 引入less文件 -->
? <link rel="stylesheet/less" type="text/less" href="./08-index.less">
? <!-- 引入js文件 -->
? <script src="./less.js"></script>
js文件要放在less文件后面。
在本地運(yùn)行沒(méi)有效果渴杆。 （如：file:///C:/Users...）
在服務(wù)器上運(yùn)行才能有效果寥枝。（如http://ip地址....）
安裝服務(wù)器：在vscode→ 搜索插件live sever→ 安裝→ 重啟vscode→?在html頁(yè)面→鼠標(biāo)右鍵點(diǎn)擊→ open width live server
3.rem單位
1）em
em是一個(gè)相對(duì)的長(zhǎng)度單位，與盒子自身的font-size值有關(guān)磁奖；
1em = 盒子中自身字體的大小 * 1
rem是一個(gè)相對(duì)的長(zhǎng)度單位囊拜，始終參照html中設(shè)置的字體大小。
1rem = html標(biāo)簽中字體的大小 * 1
代碼舉栗：
html {
? ? ? font-size: 50px;
}
div {
? ? ?font-size: 20px;
? ??width: 10em; /*200px*/?
????height: 10em;? /*200px*/
????width: 10rem;? /*500px*/
????height: 10rem;? /*500px*/
}
2）使用rem做適配
在不同設(shè)備下比搭，只需要更改html中的font-size即可冠跷。
人為將UI圖橫向劃分為指定的份數(shù)20份（如果UI圖width=640px）
? ? 計(jì)算出1份所占的大小：?640 / 20 = 32px
? ? 把計(jì)算出的1份的大小設(shè)置給html { font-size: 32px;}
? ? 1rem = 32px
4.媒體查詢
????媒體指各種設(shè)備身诺，查詢指要檢測(cè)屬于哪種設(shè)備蜜托，通過(guò)查詢當(dāng)前屬于哪種設(shè)備,讓網(wǎng)頁(yè)能夠在不同的設(shè)備下正常的預(yù)覽。
1）媒體類型
all (所有的設(shè)備)
print (打印設(shè)備)
screen(電腦屏幕,平板電腦,智能手機(jī))
2）語(yǔ)法
@media not | only 媒體類型 and (特性條件)
and 可以將多個(gè)媒體特性鏈接到一塊霉赡，相當(dāng)于 且 &橄务；
not 排除某個(gè)媒體特性 相當(dāng)于 非 ! （可以省略）
only 指定某個(gè)特定的媒體類型 （可以省略）
/*若屏幕大小是320時(shí)，div的樣式時(shí)這樣的*/
? ? @media only screen and (width:320px) {
? ? ? div {
? ? ? ? width: 100%;
? ? ? ? height: 200px;
? ? ? ? background: red;
? ? ? }
? ? }
? /*若除了屏幕大小是320時(shí)穴亏，其他大小的屏幕的div的樣式時(shí)這樣的*/
? ? @media not screen and (width:320px) {
? ? ? div {
? ? ? ? width: 100%;
? ? ? ? height: 200px;
? ? ? ? background: red;
? ? ? }
? ? }
3）外聯(lián)式語(yǔ)法
<link rel="stylesheet" href="index.css" media="screen and (min-width:640px)">
