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

聲明混合宏

@mixin 混合宏名稱[(參數(shù))]{}

在選擇器按鈕中調(diào)用混合宏

button{@include 混合宏名稱;}

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

樣式重復(fù)，用混合宏。

混合宏@mixin 混合宏名稱（參數(shù)）{}

混合宏分為帶參數(shù)和不帶參數(shù)混合宏。

混合宏里可寫邏輯關(guān)系。

[Sass]嵌套-偽類嵌套

其實(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;?}

避免選擇器嵌套：

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

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

為了防止此類情況，我們應(yīng)該盡可能避免選擇器嵌套。然而，顯然只有少數(shù)情況適應(yīng)這一措施。

[Sass]嵌套-屬性嵌套

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

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

在 Sass 中我們可以這樣寫：

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

• 選擇器嵌套

• 屬性嵌套

• 偽類嵌套

1、選擇器嵌套

假設(shè)我們有一段這樣的結(jié)構(gòu)：

<header>
<nav>
????<a?href=“##”>Home</a>
????<a?href=“##”>About</a>
????<a?href=“##”>Blog</a>
</nav>
<header>

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

nav?a?{
??color:red;
}

header?nav?a?{
??color:green;
}

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

nav?{
??a?{
????color:?red;

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

全局變量的影子

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

//SCSS
$color:?orange?!default;//定義全局變量.block?{
??color:?$color;//調(diào)用全局變量
}
em?{??$color:?red;//定義局部變量（全局變量?$color?的影子）
??a?{
????color:?$color;//調(diào)用局部變量
??}
}

什么時(shí)候聲明變量？

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

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

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

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

便利在線編輯器網(wǎng)址:

http://sassmeister.com/

混合宏，編譯后不會(huì)改變格式，代碼冗余，但是可以傳參數(shù)

繼承：調(diào)用后改變代碼格式，代碼精簡(jiǎn)，不可傳參

占位符：調(diào)用后改變代碼格式，代碼精簡(jiǎn),合并代碼，不可傳參，但是，不調(diào)用不會(huì)產(chǎn)生多余代碼占位符定義的代碼不會(huì)編譯進(jìn)去。

比如在定義了變量

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

在按鈕 button 中調(diào)用，可以按下面的方式調(diào)用

.btn-primary?{
???background-color:?$btn-primary-bg;
???color:?$btn-primary-color;
???border:?1px?solid?$btn-primary-border;
}

普通變量：

body{
????font-size:$fontSize;
}

默認(rèn)變量：

body{
????line-height:?$baseLineHeight;?
}

在默認(rèn)變量之前重新聲明變量以根據(jù)需求覆蓋默認(rèn)變量：

body{
????line-height:?$baseLineHeight;?
}

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

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

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

壓縮輸出方式會(huì)去掉標(biāo)準(zhǔn)的 Sass 和 CSS 注釋及空格。也就是壓縮好的 CSS?代碼樣式風(fēng)格：

nav?ul{margin:0;padding:0;list-style:none}nav?li{display:inline-block}nav?a{display:block;padding:6px?12px;text-decoration:none}

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

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

這個(gè)輸出的 CSS 樣式風(fēng)格和 nested 類似，只是大括號(hào)在另起一行，同樣上面的代碼，編譯出來(lái)：

nav?ul?{
??margin:?0;
??padding:?0;
??list-style:?none;}nav?li?{
??display:?inline-block;}nav?a?{
??display:?block;
??padding:?6px?12px;
??text-decoration:?none;}

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

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

該方式適合那些喜歡單行 CSS?樣式格式的朋友，編譯后的代碼如下：

nav?ul?{?margin:?0;?padding:?0;?list-style:?none;?}
nav?li?{?display:?inline-block;?}
nav?a?{?display:?block;?padding:?6px?12px;?text-decoration:?none;?}

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

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

Sass 提供了一種嵌套顯示 CSS 文件的方式。例如

nav?{
??ul?{
????margin:?0;
????padding:?0;
????list-style:?none;
??}

??li?{?display:?inline-block;?}

??a?{
????display:?block;
????padding:?6px?12px;
????text-decoration:?none;
??}
}

編譯出來(lái)的 CSS 樣式風(fēng)格：

nav?ul?{
??margin:?0;
??padding:?0;
??list-style:?none;?}
nav?li?{
??display:?inline-block;?}
nav?a?{
??display:?block;
??padding:?6px?12px;
??text-decoration:?none;?}

//1.單文件編譯：

sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

//2.多文件編譯：

sass sass/:css/

//表示將項(xiàng)目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件，并且將這些 CSS 文件都放在項(xiàng)目中“css”文件夾中。

//3.上面的命令，只能一次性編譯。每次個(gè)性保存“.scss”文件之后，都得重新執(zhí)行一次這樣的命令。

//4.編譯 Sass 時(shí)，開(kāi)啟“watch”功能，這樣只要你的代碼進(jìn)行任保修改，都能自動(dòng)監(jiān)測(cè)到代碼的變化，并且給你直接編譯出來(lái)：

sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

//5.使用 sass 命令編譯時(shí)，可以帶很多的參數(shù)

//6.watch舉例：

sass --watch sass/bootstrap.scss:css/bootstrap.css

//7.一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件，命令終端就能監(jiān)測(cè)，并重新編譯出文件：

>>>Change detected to: sass/pages/_views.scss

? ? write css/bootstrap.css

? ? write css/bootstrap.css.map

1.link引用.css

2.sass是預(yù)處理工具，提前做，需要才有功效。

3.sass開(kāi)發(fā)后，web頁(yè)面能調(diào)用sass寫好的東西，就得有sass的編譯過(guò)程。

4.sass編譯過(guò)程：

? ? 4.1.命令編譯

? ? 4.2.GUI工具編譯

? ? 4.3.自動(dòng)化編譯