scss的使用及特性

2021-10-17 01:33:17 字數 938 閱讀 9688

特性靜默注釋

混合器選擇器

選擇器繼承

scss比css使用更具有條理性和可讀性,現將scss的使用及特性整理如下

package.json中加入下面依賴,高版本會報錯,所以我在這裡安裝的是低版本

"node-sass": "^4.0.0",

"sass-loader": "^7.3.1",終端視窗執行npm install

定義$屬性名:屬性值

有作用域

下換線_與橫線-互通相容,但是個人建議還是要命名規範

可以實現巢狀,在編譯css檔案時會自動新增父元素,以空格間隔

屬性也可以實現巢狀

css

scss定義

匯入

預設變數值

巢狀匯入

css原生匯入

/*注釋*/會出現在生成的css檔案中

//注釋

單行注釋

不會在生成的css**現

作用大段樣式的重用使用

定義@mixin 混合器名使用

父元素選擇器&

群組選擇器,

和css中的選擇器一直,可以選擇多項元素,增強**復用性

子組合選擇器>

選擇父元素下第一層的子元素

同層組合選擇器

使用@extend 選擇器

與混合器相比

只重複選擇器,生成**少

根據權重選擇應用樣式

SCSS 的基本使用

首先,用一句話說明 sass scss的關係 sass就是css的預處理器,scss是sass3版本中引入的新語法特性。然後,我們來看怎麼使用呢?像日常一樣,需要安裝npm 包再使用哦 cnpm i s node sass sass loader,當然這裡你是用npm yarn 安裝都是可以的!我們...

SCSS 的使用語法

注釋 注釋分為三種 css中顯示,css中不顯示,重要注釋 壓縮不會被刪掉。import 命令匯入外部sass scss css檔案 變數 宣告變數的語法是 變數名 變數值 如下 color red 宣告變數 color區分預設變數 預設變數只需要在變數值後加上 default 用來設定預設值 對預...

vue cli專案使用scss

介紹乙個vue專案給大家學習,閱讀別人的專案可以快速提高自己哦,移動端vue完整專案 安裝node sass sass loader style loader,進入webpack.base.config.js配置scss。所以增加如下 當然,如果需要在vue檔案style標籤使用scss的話,需要宣...