SCSS 的使用語法

·注釋

注釋分為三種：/* */css中顯示，//css中不顯示，/重要注釋!/壓縮不會被刪掉。

·@import 命令匯入外部sass、scss、css檔案

·變數

宣告變數的語法是：$+變數名+：+變數值；如下

$color
:red; //宣告變數 $color

區分預設變數：

預設變數只需要在變數值後加上 !default , 用來設定預設值，對預設變數進行重新宣告可以實現覆蓋預設值；如

$color :red !default; //宣告預設變數 $color $color :purple; //根據需求覆蓋預設變數 .father01

區分全域性變數和區域性變數

全域性變數是元素外宣告的變數，區域性變數是在元素裡宣告的變數，重複宣告時區域性變數會覆蓋全域性變數；

$height
:200px; //全域性變數宣告不在大花括號內
$bgcolor
:blue;
body
}

body
.father02
}

·變數巢狀引用：即字串插值，需要使用 #{} 來進行包裹

$left
:left;
.father02
:2px solid purple; //使用字串插值之前必須先宣告
}

·變數計算

$left
:left;
.father02
:2px solid purple; //使用字串插值之前必須先宣告
}

·巢狀

選擇器巢狀不多說了

屬性巢狀（有相同屬性字首）如下

border:

在巢狀時候可以使用 & 來引用父元素

.container
效果      color
:purple;
}}

·繼承

繼承 .class 使用 @extend

.container .mytext

·scss佔位符 %

使用% 宣告的**塊，如果不被@extend呼叫的話就不會被編譯。編譯出來的**會將相同的**合併在一起，**變得十分簡潔。

%m5

.p1

·重複**塊，使用混合@mixin命令定義，以及使用@include呼叫該mixin

@mixin normalstyle .container

在使用@mixin和@include時，傳入引數和預設值

@mixin
normalstyle
($width,$height,$color,$defaultvalue
:orange)
.container

·條件語句

.container
@else }
}

·scss中的三種迴圈

1、for迴圈

在sass中的@for迴圈有兩種方式：

① @for $i from through

② @for $i from to

其中$i表示變數，start表示開始值，end表示結束值；

through表示包括end這個數值；to表示不包括end這個數值；

2、while迴圈

只要@while後面的條件為true就會執行，直到表示式值為false時停止迴圈；

3、each in迴圈

就是去遍歷乙個列表，然後從列表中取出對用值；他的指令形式為：@each $var in($var為變數值，list為sassscript表示式）

//for 迴圈
@for $i from 1 to 5
px solid;}}
//while 迴圈
$m:8;
@while $m > 0
$m:$m - 2 ;
}//這裡可以對$m進行運算 讓它每次都減去2
//each 語法
@each $item in class01,class02
}//會編譯成 .class01 , .class02

·使用@function 自定義函式及使用

@function
double
($sn)
.mytext

·可以直接使用scss內建的顏色函式，

.mytext
}

scss語法入門

scss 是 sass3的新版本，也是目前推薦的語法，以.scss結尾的檔案所以 scss sass3最新版本，目前就使用scss。1.引入其他.scss檔案 import index.scss 這樣的話，檔案在編譯後，會自動把引入的檔案和當前檔案合併為乙個.scss檔案 2.引入其他.css檔案...

beamer的使用語法

documentclass utf8 usepackage utf8,noindent usepackage use graph format usepackage usepackage 該為一現成的模板，在 miktex texmf tex latex beamer themes theme下面有...

CSDN markdown 使用語法

建立乙個自定義列表如何建立乙個註腳注釋也是必不可少的 katex數學公式新的甘特圖功能，豐富你的文章 uml 圖表 flowchart流程圖匯出與匯入你好！這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章，了解一下mar...

SCSS 的使用語法

scss語法入門

beamer的使用語法

CSDN markdown 使用語法

相關推薦