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

// 編譯出來(lái)的CSS中不顯示

/**/ 編譯出來(lái)的CSS中顯示

插值#{}

讓?變量和屬性 工作的很完美

$properties:?(margin,?padding);
@mixin?set-value($side,?$value)?{
????@each?$prop?in?$properties?{
????????#{$prop}-#{$side}:?$value;
????}
}
.login-box?{
????@include?set-value(top,?14px);
}

編譯后

.login-box?{
????margin-top:?14px;
????padding-top:?14px;
}

@mixin?generate-sizes($class,?$small,?$medium,?$big)?{
????.#{$class}-small?{?font-size:?$small;?}
????.#{$class}-medium?{?font-size:?$medium;?}
????.#{$class}-big?{?font-size:?$big;?}
}
@include?generate-sizes("header-text",?12px,?20px,?40px);

編譯后

.header-text-small?{?font-size:?12px;?}
.header-text-medium?{?font-size:?20px;?}
.header-text-big?{?font-size:?40px;?}

局限性：

1、調(diào)用變量的插值無(wú)效；

2、調(diào)用混合宏的插值無(wú)效；

混合宏 VS 繼承 VS 占位符

%placeholder 占位符，是個(gè)好東西，而且很強(qiáng)大

只有通過(guò) @extend 調(diào)用的占位符，才會(huì)編譯后生成CSS代碼，而且編譯出來(lái)的代碼會(huì)將相同的代碼合并在一起。

沒(méi)有通過(guò)@extend調(diào)用的占位符，不會(huì)產(chǎn)生任何代碼。

Sass的繼承，通過(guò)關(guān)鍵詞“@extend”來(lái)繼承類(lèi)中的樣式代碼塊

Sass混合宏的不足：

會(huì)生成冗余的代碼塊，并不能智能的將相同的樣式代碼塊合并在一起

第一種是@mixin size($width,$height)，調(diào)用時(shí)傳參的是@include size(500px,300px);

第二種是@mixin size($width...)，調(diào)用傳參的方法有@include size(500px 300px)和@include size(500px,300px)，表示一個(gè)參數(shù)里有多個(gè)值，這里編譯之后的表現(xiàn)形式是width:500px 300px和width:500px,300px。

如果是使用@include size(500px,300px)調(diào)用給同一個(gè)參數(shù)的話(huà)，是必須使用@mixin size($width...)這樣的形式，不然會(huì)編譯錯(cuò)誤，而@include size(500px 300px)則不用加省略號(hào)，用@mixin size($width)也能正確編譯。

@include 調(diào)用混合宏

button?{?@include?border-radius;}

如果你的整個(gè)網(wǎng)站中有幾處小樣式類(lèi)似，比如顏色，字體等，在 Sass 可以使用變量來(lái)統(tǒng)一處理，那么這種選擇還是不錯(cuò)的。但當(dāng)你的樣式變得越來(lái)越復(fù)雜，需要重復(fù)使用大段的樣式時(shí)，使用變量就無(wú)法達(dá)到我們目了。這個(gè)時(shí)候 Sass 中的混合宏就會(huì)變得非常有意義

不帶參數(shù)混合宏：

@mixin?border-radius{
????border-radius:?5px;
}

@mixin?是聲明混合宏的關(guān)鍵詞，border-radius是混合宏的名稱(chēng)，大括號(hào)里面的是復(fù)用的樣式代碼。

帶參數(shù)混合宏：

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

帶參數(shù)混合宏：參數(shù)設(shè)置默認(rèn)值

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

帶參數(shù)混合宏：復(fù)雜的混合宏

@mixin?box-shadow($shadow...)?{??
??@if?length($shadow)?>=?1?{
????@include?prefixer(box-shadow,?$shadow);
??}?@else{
????$shadow:0?0?4px?rgba(0,0,0,.3);
????@include?prefixer(box-shadow,?$shadow);
??}
}

$shadow...?表示可以有一個(gè)或有多個(gè)陰影值，重點(diǎn)看大括號(hào)內(nèi)（@if...@else）邏輯關(guān)系

屬性嵌套，主要是有前綴的屬性，如：border,margin,padding,font等屬性

Sass 的嵌套分為三種：

• 選擇器嵌套? ? （這個(gè)一定要慎重使用，過(guò)度使用會(huì)混淆擇器路徑，代碼難以閱讀）

• 屬性嵌套

• 偽類(lèi)嵌套

只有滿(mǎn)足所有下述標(biāo)準(zhǔn)時(shí)方可創(chuàng)建新變量：

1. 該值至少重復(fù)出現(xiàn)了兩次；

2. 該值至少可能會(huì)被更新一次；

3. 該值所有的表現(xiàn)都與變量有關(guān)（非巧合）。

基本上，沒(méi)有理由聲明一個(gè)永遠(yuǎn)不需要更新或者只在單一地方使用變量。

sass 的默認(rèn)變量一般是用來(lái)設(shè)置默認(rèn)值，然后根據(jù)需求來(lái)覆蓋的，覆蓋的方式也很簡(jiǎn)單，只需要在默認(rèn)變量?之前?重新聲明下變量即可。

默認(rèn)變量的價(jià)值在進(jìn)行?組件化開(kāi)發(fā)?的時(shí)候會(huì)非常有用。

聲明變量的符號(hào)：$

1. 嵌套輸出方式 nested????????（結(jié)束的大括號(hào)不獨(dú)立一行）

2. 展開(kāi)輸出方式 expanded? ?（結(jié)束的大括號(hào)獨(dú)立一行） ?

3. 緊湊輸出方式 compact? ? ?（單行 CSS?樣式格式）?

4. 壓縮輸出方式 compressed（所有代碼在一行）