亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

聲明混合宏

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

在選擇器按鈕中調用混合宏

button{@include 混合宏名稱;}

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

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

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

這個時候編譯出來的 CSS:

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

樣式重復，用混合宏。

混合宏@mixin 混合宏名稱（參數）{}

混合宏分為帶參數和不帶參數混合宏。

混合宏里可寫邏輯關系。

[Sass]嵌套-偽類嵌套

其實偽類嵌套和屬性嵌套非常類似，只不過他需要借助`&`符號一起配合使用。我們就拿經典的“clearfix”為例吧：

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

編譯出來的 CSS：

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

避免選擇器嵌套：

• 選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發者需要花費巨大精力計算不同縮進級別下的選擇器具體的表現效果。

• 選擇器越具體則聲明語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。

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

[Sass]嵌套-屬性嵌套

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

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

在 Sass 中我們可以這樣寫：

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

• 選擇器嵌套

• 屬性嵌套

• 偽類嵌套

1、選擇器嵌套

假設我們有一段這樣的結構：

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

想選中 header 中的 a 標簽，在寫 CSS 會這樣寫：

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

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

那么在 Sass 中，就可以使用選擇器的嵌套來實現：

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

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

全局變量的影子

當在局部范圍（選擇器內、函數內、混合宏內...）聲明一個已經存在于全局范圍內的變量時，局部變量就成為了全局變量的影子?；旧希植孔兞恐粫诰植糠秶鷥雀采w全局變量。

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

什么時候聲明變量？

只有滿足所有下述標準時方可創建新變量：

1. 該值至少重復出現了兩次；

2. 該值至少可能會被更新一次；

3. 該值所有的表現都與變量有關（非巧合）。

便利在線編輯器網址:

http://sassmeister.com/

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

繼承：調用后改變代碼格式，代碼精簡，不可傳參

占位符：調用后改變代碼格式，代碼精簡,合并代碼，不可傳參，但是，不調用不會產生多余代碼占位符定義的代碼不會編譯進去。

比如在定義了變量

$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 中調用，可以按下面的方式調用

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

普通變量：

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

默認變量：

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

在默認變量之前重新聲明變量以根據需求覆蓋默認變量：

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

默認變量的價值在進行組件化開發的時候會非常有用。

在編譯的時候帶上參數“?--style?compressed”:

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

壓縮輸出方式會去掉標準的 Sass 和 CSS 注釋及空格。也就是壓縮好的 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}

在編譯的時候帶上參數“?--style expanded”:

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

這個輸出的 CSS 樣式風格和 nested 類似，只是大括號在另起一行，同樣上面的代碼，編譯出來：

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

在編譯的時候帶上參數“?--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;?}

在編譯的時候帶上參數“?--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;
??}
}

編譯出來的 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;?}

//1.單文件編譯：

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

//2.多文件編譯：

sass sass/:css/

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

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

//4.編譯 Sass 時，開啟“watch”功能，這樣只要你的代碼進行任保修改，都能自動監測到代碼的變化，并且給你直接編譯出來：

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

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

//6.watch舉例：

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

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

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

? ? write css/bootstrap.css

? ? write css/bootstrap.css.map

1.link引用.css

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

3.sass開發后，web頁面能調用sass寫好的東西，就得有sass的編譯過程。

4.sass編譯過程：

? ? 4.1.命令編譯

? ? 4.2.GUI工具編譯

? ? 4.3.自動化編譯