【全面系統講解CSS】學習筆記-第七章 預處理器

一、概述

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

二、環境準備

2.1、node安裝

菜鳥教程-node安裝傳送門

2.2、npm安裝

默認安裝完node是已經安裝好npm了的,但是也可能出錯。需要進行校驗,可以打開cmd命令窗口輸入

node -v
npm -v

來校驗是否安裝正確。

npm升級報錯,解決傳送門

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

在這裏插入圖片描述
在這裏插入圖片描述
編譯後
在這裏插入圖片描述

四、預處理框架

在這裏插入圖片描述

五、面試

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章