第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

Sass是最早的CSS預(yù)處理語(yǔ)言，比LESS更為強(qiáng)大

使用Ruby語(yǔ)言編寫的一款CSS預(yù)處理器

CSS預(yù)處理器：Sass、LESS、Stylus

使用變量、簡(jiǎn)單的邏輯程序、函數(shù)，讓CSS更簡(jiǎn)潔、適應(yīng)性強(qiáng)、可讀性好

sass編譯的輸出樣式風(fēng)格：

• 嵌套輸出方式：nest

• 展開輸出方式：expand

• 緊湊輸出方式：compact

• 壓縮輸出方式：compressed
  

sass與scss的區(qū)別：

• 文件擴(kuò)展名不同，sass是以.sass后綴為擴(kuò)展名；而scss是以.scss后綴為擴(kuò)展名

• 語(yǔ)法書寫方式不同，Sass是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來寫，不帶大括號(hào)和分號(hào)；而scss的語(yǔ)法與css類似。
  

//SCSS
p?{
??font:?10px/8px;?????????????//?純?CSS，不是除法運(yùn)算
??$width:?1000px;
??width:?$width/2;????????????//?使用了變量，是除法運(yùn)算
??width:?round(1.5)/2;????????//?使用了函數(shù)，是除法運(yùn)算
??height:?(500px/2);??????????//?使用了圓括號(hào)，是除法運(yùn)算
??margin-left:?5px?+?8px/2px;?//?使用了加（+）號(hào)，是除法運(yùn)算
}

.box?{
??width:?(1000px?/?100px);
}

編譯出來的CSS如下：

.box?{
??width:?10;
}

加減法，單位不同，報(bào)錯(cuò)。

sass值列表：

獨(dú)立的值也被視為值列表。

(1px 2px)(3px 4px)是包含兩個(gè)值列表的值列表。

1px 2px 3px 4px是包含四個(gè)值的值列表。

編譯成css是一樣的，但是在scss中意義不同。

()是空的列表，會(huì)報(bào)錯(cuò)。

值列表中包含空的值列表或空值，編譯清除空值，

如1px 2px () 3px 或1px 2px null 3px。

列表函數(shù)：

nth函數(shù)：直接訪問值列表中的某一項(xiàng)。

join函數(shù)：多個(gè)值列表連結(jié)在一起。

append函數(shù)：值列表中添加值。

@each規(guī)則：給值列表的每個(gè)項(xiàng)目添加樣式。

編譯css文件不改變類型，只有使用插值語(yǔ)句#{}有引號(hào)編譯為無(wú)引號(hào)。

當(dāng)deprecated = property syntax時(shí)，所有字符串都被編譯為無(wú)引號(hào)字符串。

[Sass]混合宏 VS 繼承 VS 占位符

[Sass]占位符 %placeholder

這段代碼沒有被 @extend 調(diào)用，他并沒有產(chǎn)生任何代碼塊，只是靜靜的躺在你的某個(gè) SCSS 文件中。只有通過 @extend 調(diào)用才會(huì)產(chǎn)生代碼：

//SCSS


.btn?{??
????@extend?%mt5;
????@extend?%pt5;
??}

.block?{
??@extend?%mt5;

??span?{
??????@extend?%pt5;
??}
}

編譯：

//CSS
.btn,?.block?{
??margin-top:?5px;
}

.btn,?.block?span?{
??padding-top:?5px;
}

@extend 調(diào)用的占位符，編譯出來的代碼會(huì)將相同的代碼合并在一起。

sass繼承【@extend】：

//SCSS
.btn?{
??border:?1px?solid?#ccc;
??padding:?6px?10px;
??font-size:?14px;
}

.btn-primary?{
??background-color:?#f36;
??color:?#fff;??
??
}

.btn-second?{
??background-color:?orange;
??color:?#fff;??
??
}

繼承類樣式塊中所有樣式代碼，而且編譯出來的 CSS 會(huì)將選擇器合并在一起，形成組合選擇器：

混合宏最不足之處：

并不能智能的將相同的樣式代碼塊合并在一起。

C) 傳多個(gè)參數(shù)

@mixin?center($width,$height){
??width:?$width;
??height:?$height;
??position:?absolute;
??top:?50%;
??left:?50%;
??margin-top:?-($height)?/?2;
??margin-left:?-($width)?/?2;
}

.box-center?{
??@include?center(500px,300px);
}

.box-center?{
??width:?500px;
??height:?300px;
??position:?absolute;
??top:?50%;
??left:?50%;
??margin-top:?-150px;
??margin-left:?-250px;
}

? 有一個(gè)特別的參數(shù)“…”。當(dāng)混合宏傳的參數(shù)過多之時(shí)，可以使用參數(shù)來替代，如：

@mixin?box-shadow($shadows...){
??@if?length($shadows)?>=?1?{
????-webkit-box-shadow:?$shadows;
????box-shadow:?$shadows;
??}?@else?{
????$shadows:?0?0?2px?rgba(#000,.25);
????-webkit-box-shadow:?$shadow;
????box-shadow:?$shadow;
??}
}

.box?{
??@include?box-shadow(0?0?1px?rgba(#000,.5),0?0?2px?rgba(#000,.2));
}

.box?{
??-webkit-box-shadow:?0?0?1px?rgba(0,?0,?0,?0.5),?0?0?2px?rgba(0,?0,?0,?0.2);
??box-shadow:?0?0?1px?rgba(0,?0,?0,?0.5),?0?0?2px?rgba(0,?0,?0,?0.2);
}

B) 傳一個(gè)帶值的參數(shù)

@mixin?border-radius($radius:3px){
??-webkit-border-radius:?$radius;
??border-radius:?$radius;
}

調(diào)用默認(rèn)混合宏：

.btn?{
??@include?border-radius;
}

調(diào)用隨機(jī)傳值的混合宏：

.box?{
??@include?border-radius(50%);
}

A) 傳一個(gè)不帶值的參數(shù)

聲明參數(shù)不帶值的混合宏：

@mixin?border-radius($radius){
??-webkit-border-radius:?$radius;
??border-radius:?$radius;
}

調(diào)用：

.box?{
??@include?border-radius(3px);
}

編譯出：

.box?{
??-webkit-border-radius:?3px;
??border-radius:?3px;
}