scss語法入門

scss 是 sass3的新版本，也是目前推薦的語法，以.scss結尾的檔案

所以 scss == sass3最新版本，目前就使用scss。

@import 'index.scss'

2.引入其他.css檔案

@import 'index.css'

scss的注釋有兩種

/**/

2.行注釋

//

scss變數分為3種，以$符號開頭,後面緊跟變數名。變數名和變數值之間用冒號：分開

$key: value;

$key: value!default;

預設變數是可以被覆蓋的,具體覆蓋方法如下
$font: 12px;
$font: 14px!default;

$fontsize:14px;

font:#

多值變數分為list和map兩種型別，list類似於js的陣列，map類似於物件

巢狀分為兩種：1.選擇器巢狀（目前經常使用的）、2.屬性巢狀：不經常使用

// scss 檔案ul}

}//解析為 css 檔案
ul 
ul li 
ul li a
//scss 在屬性選擇器中，&表示父元素選擇器a}
//解析為 css 檔案
aa:hover

// scss 檔案

div left:}}
//解析為 css 檔案
div

@mixin 呼叫@mixin方法需要使用 @include

// scss 普通混合

@mixin font
.footer
// 解析為 css 檔案
.footer
// scss 檔案
@mixin font
($size:
12px)
.footer

// scss檔案

.font
.footer
//解析問 css 檔案
.font,
.footer
.footer

%選擇器名，通過@extend 去呼叫，如果不呼叫，則檔案編譯後不會出現改該冗餘css檔案

// scss 檔案

%dir
%clear
div/*只有 %dir 選擇器被呼叫了，%clear 在編譯的時候會被當做冗餘檔案給過濾掉，不會出現在編譯後的.css檔案中*/

sass 內建了很多函式，自己也可以定義函式。以 @function 開始 @return 返回值

//scss 檔案

@function
per($data)
div//解析為 css檔案
div

運算：對於（數字，顏色，變數）的四則（加減乘除）運算,運算子前後各保留一格空格

if判斷：@if可以單獨使用，也可以配合@else、@else if 一起使用

三目運算子：if(true,1px,2px)，返回的值是1px,if(false,1px,2px),返回的值是2px

for迴圈，共有兩種寫法，1：@for $var from through

2：@for $var from to 。兩種寫法唯一的區別就是，through包括end這個數，to不包括end這個數。

each迴圈，@each $var in ,list和map分別表示為list和map型別資料。

變數巢狀

&函式：用於移動端頁面計算rem或者vw最佳

SCSS 的使用語法

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

sass的scss的語法

1.s red 定義變數後面加 default就是預設值，有值掉值，沒值取預設，不論前後 a red a blue default 2.hover 裡面呼叫指向父級 3.相當於兄弟元素 4.at root跳出當前的整個巢狀 5.media only screen and max width 768p...

在Nuxt中使用scss語法

npm i d node sass sass loadersass基礎語法說明 注意 一定要寫上lang scss 才可以使用scss語法 在assets目錄下新增檔案 my global.scss base color red my btncss 以下兩種引入方式都可以 assets my glo...