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

[Sass]混合宏的參數(shù)--傳一個(gè)不帶值的參數(shù)

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

在混合宏中，可以傳一個(gè)不帶任何值的參數(shù)，比如：

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

在混合宏“border-radius”中定義了一個(gè)不帶任何值的參數(shù)“$radius”。

在調(diào)用的時(shí)候可以給這個(gè)混合宏傳一個(gè)參數(shù)值：

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

這里表示給混合宏傳遞了一個(gè)“border-radius”的值為“3px”。

編譯出來(lái)的 CSS:

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

[Sass]混合宏-調(diào)用混合宏

在 Sass 中通過(guò) @mixin 關(guān)鍵詞聲明了一個(gè)混合宏，那么在實(shí)際調(diào)用中，其匹配了一個(gè)關(guān)鍵詞“@include”來(lái)調(diào)用聲明好的混合宏。例如在你的樣式中定義了一個(gè)圓角的混合宏“border-radius”:

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

在一個(gè)按鈕中要調(diào)用定義好的混合宏“border-radius”，可以這樣使用：

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

[Sass]混合宏-聲明混合宏

1、聲明混合宏

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

其中?@mixin?是用來(lái)聲明混合宏的關(guān)鍵詞，有點(diǎn)類(lèi)似 CSS 中的 @media、@font-face 一樣。border-radius?是混合宏的名稱(chēng)。大括號(hào)里面是復(fù)用的樣式代碼。

帶參數(shù)混合宏：

復(fù)雜的混合宏：

[Sass]嵌套-偽類(lèi)嵌套

避免選擇器嵌套：

• 選擇器嵌套最大的問(wèn)題是將使最終的代碼難以閱讀。開(kāi)發(fā)者需要花費(fèi)巨大精力計(jì)算不同縮進(jìn)級(jí)別下的選擇器具體的表現(xiàn)效果。

• 選擇器越具體則聲明語(yǔ)句越冗長(zhǎng)，而且對(duì)最近選擇器的引用(&)也越頻繁。在某些時(shí)候，出現(xiàn)混淆選擇器路徑和探索下一級(jí)選擇器的錯(cuò)誤率很高，這非常不值得。

[Sass]嵌套-屬性嵌套

.box?{
????border-top:?1px?solid?red;
????border-bottom:?1px?solid?green;
}

在 Sass 中我們可以這樣寫(xiě)：

.box?{
??border:?{
???top:?1px?solid?red;
???bottom:?1px?solid?green;
??}
}

[Sass]嵌套-選擇器嵌套

Sass 的嵌套分為三種：

• 選擇器嵌套

• 屬性嵌套

• 偽類(lèi)嵌套

[Sass]局部變量和全局變量

全局變量就是定義在元素外面的變量

而定義在元素內(nèi)部的變量是一個(gè)局部變量。

當(dāng)在局部范圍（選擇器內(nèi)、函數(shù)內(nèi)、混合宏內(nèi)...）聲明一個(gè)已經(jīng)存在于全局范圍內(nèi)的變量時(shí)，局部變量就成為了全局變量的影子?；旧希植孔兞恐粫?huì)在局部范圍內(nèi)覆蓋全局變量。

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

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

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

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

sass變量調(diào)用

默認(rèn)變量

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

$baseLineHeight:?2;
$baseLineHeight:?1.5?!default;
body{
????line-height:?$baseLineHeight;?
}

編譯后的css代碼：

body{
????line-height:2;
}

$brand-primary?:?darken(#428bca,?6.5%)?!default;?//?#337ab7$btn-primary-color?:?#fff?!default;$btn-primary-bg?:?$brand-primary?!default;$btn-primary-border?:?darken($btn-primary-bg,?5%)?!default;

如果值后面加上!default則表示默認(rèn)值。

Sass 的變量包括三個(gè)部分：

1. 聲明變量的符號(hào)“$”

2. 變量名稱(chēng)

3. 賦予變量的值

sass 調(diào)試

，只要你的瀏覽器支持“sourcemap”功能即可。早一點(diǎn)的版本，需要在編譯的時(shí)候添加“--sourcemap”? 參數(shù)：

sass?--watch?--scss?--sourcemap?style.scss:style.css

4. 壓縮輸出方式 compressed

在編譯的時(shí)候帶上參數(shù)“?--style?compressed”:

sass?--watch?test.scss:test.css?--style?compressed

3、嵌套輸出方式 compact

在編譯的時(shí)候帶上參數(shù)“?--style?compact”:

sass?--watch?test.scss:test.css?--style?compact

該方式適合那些喜歡單行 CSS?樣式格式的朋友

2、嵌套輸出方式 expanded

在編譯的時(shí)候帶上參數(shù)“?--style expanded”:

sass?--watch?test.scss:test.css?--style?expanded

?1、嵌套輸出方式 nested

在編譯的時(shí)候帶上參數(shù)“?--style nested”:

sass?--watch?test.scss:test.css?--style?nested