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

// 單文件編譯

sass scss/test.scss:css/test.css

// 多文件編譯

sass scss/:css/

// 缺點(diǎn)及解決方案

缺點(diǎn)：每次更新scss文件，都需要執(zhí)行命令生成新的css文件

解決方法：--watch，檢測(cè)scss文件，每次更新自動(dòng)生成css文件

????sass --watch scss/test.scss:css/test.css

// 注意點(diǎn)：

冒號(hào)(:)兩邊不能有空格

在 Sass 中也具有繼承一說(shuō)，也是繼承類中的樣式代碼塊。在 Sass 中是通過(guò)關(guān)鍵詞 “@extend”來(lái)繼承已存在的類樣式塊，從而實(shí)現(xiàn)代碼的繼承。如下所示：

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

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

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

編譯出來(lái)之后：

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

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

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

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

在 Sass 的混合宏中，還可以給混合宏的參數(shù)傳一個(gè)默認(rèn)值，例如：

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

在混合宏“border-radius”傳了一個(gè)參數(shù)“$radius”，而且給這個(gè)參數(shù)賦予了一個(gè)默認(rèn)值“3px”。

在調(diào)用類似這樣的混合宏時(shí)，會(huì)多有一個(gè)機(jī)會(huì)，假設(shè)你的頁(yè)面中的圓角很多地方都是“3px”的圓角，那么這個(gè)時(shí)候只需要調(diào)用默認(rèn)的混合宏“border-radius”:

.btn { ? @include border-radius; }

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

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

但有的時(shí)候，頁(yè)面中有些元素的圓角值不一樣，那么可以隨機(jī)給混合宏傳值，如：

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

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

.box { ? -webkit-border-radius: 50%; ? border-radius: 50%; }

Sass 的混合宏有一個(gè)強(qiáng)大的功能，可以傳參，那么在 Sass 中傳參主要有以下幾種情形：

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; }

這個(gè)時(shí)候編譯出來(lái)的 CSS:

button { ? -webkit-border-radius: 3px; ? border-radius: 3px; }

其實(shí)偽類嵌套和屬性嵌套非常類似，只不過(guò)他需要借助`&`符號(hào)一起配合使用。我們就拿經(jīng)典的“clearfix”為例吧：

.clearfix{&:before,&:after {
? ?content:"";
? ?display: table;
?}&:after {
? ?clear:both;
? ?overflow: hidden;
?}
}

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

clearfix:before, .clearfix:after {
?content: "";
?display: table;
}
.clearfix:after {
?clear: both;
?overflow: hidden;
}

Sass 中還提供屬性嵌套，CSS 有一些屬性前綴相同，只是后綴不一樣，比如：border-top/border-right，與這個(gè)類似的還有 margin、padding、font 等屬性。假設(shè)你的樣式中用到了：

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

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

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

& 表示取父值

想選中 header 中的 a 標(biāo)簽，在寫(xiě) CSS 會(huì)這樣寫(xiě)：

nav a {
?color:red;
}

header nav a {
?color:green;
}

那么在 Sass 中，就可以使用選擇器的嵌套來(lái)實(shí)現(xiàn)：

nav {
?a {
? ?color: red;

? ?header & {
? ? ?color:green;
? ?}
?} ?
}

全局變量與局部變量

先來(lái)看一下代碼例子：

//SCSS$color: orange !default;//定義全局變量(在選擇器、函數(shù)、混合宏...的外面定義的變量為全局變量)
.block {
?color: $color;//調(diào)用全局變量
}
em {
?$color: red;//定義局部變量
?a {
? ?color: $color;//調(diào)用局部變量
?}
}
span {
?color: $color;//調(diào)用全局變量
}

css 的結(jié)果：

//CSS
.block {
?color: orange;
}
em a {
?color: red;
}
span {
?color: orange;
}

sass 的默認(rèn)變量?jī)H需要在值后面加上 !default 即可。

1. 混合宏：

   編譯出來(lái)的 CSS 清晰告訴了大家，他不會(huì)自動(dòng)合并相同的樣式代碼，如果在樣式文件中調(diào)用同一個(gè)混合宏，會(huì)產(chǎn)生多個(gè)對(duì)應(yīng)的樣式代碼，造成代碼的冗余，這也是 CSSer 無(wú)法忍受的一件事情。不過(guò)他并不是一無(wú)事處，他可以傳參數(shù)。
   

2. 繼承：

   使用繼承后，編譯出來(lái)的 CSS 會(huì)將使用繼承的代碼塊合并到一起，通過(guò)組合選擇器的方式向大家展現(xiàn)，比如 .mt, .block, .block span, .header, .header span。這樣編譯出來(lái)的代碼相對(duì)于混合宏來(lái)說(shuō)要干凈的多，也是 CSSer 期望看到。但是他不能傳變量參數(shù)。

3. 占位符

   編譯出來(lái)的 CSS 代碼和使用繼承基本上是相同，只是不會(huì)在代碼中生成占位符 mt 的選擇器。那么占位符和繼承的主要區(qū)別的，“占位符是獨(dú)立定義，不調(diào)用的時(shí)候是不會(huì)在 CSS 中產(chǎn)生任何代碼；繼承是首先有一個(gè)基類存在，不管調(diào)用與不調(diào)用，基類的樣式都將會(huì)出現(xiàn)在編譯出來(lái)的 CSS 代碼中。”
   

//sass和css寫(xiě)法

//sass寫(xiě)法,不帶有大括號(hào)和分號(hào)

body

color:#fff

background:#f36

//css寫(xiě)法，帶有大括號(hào)和分號(hào)

body{

? ? color:#fff;

? ? background:#f36;

}

//scss和css寫(xiě)法無(wú)差別，css文件可以直接改成scss文件使用

//sass語(yǔ)法，沒(méi)有大括號(hào)和分號(hào)，擴(kuò)展名.sass

$font-stack:Helvetica,sans-serif? //定義變量

$primary-color:#333 //定義變量

body

font:100% $font-stack

color:$primary-color

//scss語(yǔ)法，有大括號(hào)和分號(hào)，與css類似，擴(kuò)展名.scss

$font-stackL:Helvetica,sans-serif;

$primary-color:$primary-color;

body{

? ? font:100% $font-stack;

? ? color:$primary-color;

}

//css

body{

? ? font:100% Helvetica,sans-serif;

? ? color:#333;

}

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

用“@include”來(lái)調(diào)用聲明好的混合宏

button?{????
????@include?border-radius（1px）;
}

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

在 Sass 中，使用“@mixin”來(lái)聲明一個(gè)混合宏

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

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

帶參數(shù)混合宏：

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

復(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);
??}
}