scss常用語法相關(guān)參考內(nèi)容

scss常用語法SCSS(SassyCSS)是一種用于編寫CSS的擴(kuò)展語言，它允許開發(fā)人員使用一些便利的特性，如變量、嵌套、混合、繼承等，從而使CSS的編寫更為高效、快捷、易維護(hù)。下面將從SCSS的基本語法、變量、選擇器、嵌套、混合、繼承等方面介紹SCSS語言的常用語法。

基本語法

SCSS是CSS預(yù)處理器，其基本語法與CSS語法基本相同，但加入了各種語法擴(kuò)展。SCSS的一個(gè)核心特點(diǎn)是允許CSS中的某些部分使用變量、函數(shù)或其他一些特性。下面展示一些SCSS的基本語法：

1.定義變量

$primary-color:#007bff;//定義primary-color變量為藍(lán)色

body{

color:$primary-color;

}

//編譯后的CSS：

body{

color:#007bff;

}

2.語句使用分號(hào)

body{

font-size:14px;

}

3.塊使用大括號(hào){}

body{

font-size:14px;

h1{

font-size:24px;

color:$primary-color;//使用變量

}

}

4.標(biāo)識(shí)符

標(biāo)識(shí)符是指SCSS中用來表示某個(gè)具體內(nèi)容的名稱或者符號(hào)，如變量、函數(shù)、選擇器等，它的命名規(guī)則與CSS語法相同。

選擇器

SCSS的選擇器與CSS語法相同，支持元素選擇器、ID選擇器、類選擇器等。

1.嵌套選擇器

SCSS允許樣式與HTML結(jié)構(gòu)的層級(jí)結(jié)構(gòu)對(duì)應(yīng)，減少了冗余代碼。下面是一段嵌套選擇器的例子：

nav{

ul{

margin:0;

padding:0;

list-style:none;

}

li{

display:inline-block;

a{

display:block;

padding:6px12px;

text-decoration:none;

&:hover{text-decoration:underline;}

}

}

}

2.父級(jí)選擇器&

父級(jí)選擇器&允許在嵌套的選擇器中訪問父級(jí)選擇器，并且可以使用在類、ID或標(biāo)簽名前添加特定字符。

.btn{

&-primary{

background-color:$primary-color;//$primary-color已定義

color:white;

}

}

//編譯后的CSS：

.btn-primary{

background-color:#007bff;

color:white;

}

變量

SCSS支持變量，可以使用$來定義一些常用的樣式，方便在多個(gè)樣式中使用，也有利于開發(fā)的規(guī)范性。

例子：

$primary-color:#007bff;

$secondary-color:#6c757d;

$font-size:16px;

$border-radius:4px;

.button{

background-color:$primary-color;//使用變量

color:#fff;

font-size:$font-size;

border-radius:$border-radius;

}

嵌套

SCSS的嵌套語法允許樣式與HTML結(jié)構(gòu)的層級(jí)關(guān)系較為清晰，從而使得代碼看起來較為簡潔。它包含選擇器的嵌套、屬性值的嵌套、函數(shù)的嵌套等。

例子：

nav{

ul{

margin:0;

padding:0;

list-style:none;

li{

display:inline-block;

a{

display:block;

padding:6px12px;

text-decoration:none;

&:hover{

text-decoration:underline;

}

.icon{

font-size:20px;

}

}

}

}

}

混合（Mixin）

SCSS的混合指的是將一組CSS屬性打包成一個(gè)代碼塊，供多次使用的語法?；旌峡梢越邮軈?shù)，可以從一個(gè)或多個(gè)父選擇器中繼承。

例子：

@mixintransform($property){

-webkit-transform:$property;

-ms-transform:$property;

transform:$property;

}

.box{

background-color:#eee;

@includetransform(translate(100px,50px));

}

繼承

SCSS的繼承語法指的是將一個(gè)選擇器中的所有樣式屬性應(yīng)用到另一個(gè)選擇器上。在SCSS中使用@extend關(guān)鍵字進(jìn)行繼承。

例子：

.input{

border:1pxsolid#ccc;

padding:6px10px;

}

.button{

@extend.input;//繼承.input的屬性

backgrou