第七章 預處理器
一、概述
二、環境準備
2.1、node安裝
2.2、npm安裝
默認安裝完node是已經安裝好npm了的,但是也可能出錯。需要進行校驗,可以打開cmd命令窗口輸入
node -v
npm -v
來校驗是否安裝正確。
2.3、less安裝
-g: 全局安裝
npm install less -g
2.4、sass安裝
npm install node-sass -g
三、Demo
3.1、Less嵌套
使用下面的命令將less文件轉成css文件,入下圖所示。
lessc 1-nest.less>1-nest.css
3.2、Sass嵌套
node-sass 1-nest.scss>1-news-scss.css
3.3、變量
Less和Sass的變量定義使用的符號不同。Less用的是@,Sass用的是$。
3.3.1、Less變量
3.3.2、Sass變量
3.4、mixin
當我們需要將相同部分提取出來,減少重複代碼的時候。我們就需要使用mixin
3.4.1、Less
3.4.2、Sass
3.5、extend
3.5.1、Less
3.5.2、Sass
3.6、loop
3.6.1、Less
3.6.2、Sass
3.7、import
3.7.1、Less
Less會將這些@import進來的css都融合到一個css文件中。
3.7.2、Sass
編譯後
四、預處理框架
五、面試