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

[Sass]混合宏的參數--傳一個不帶值的參數

A) 傳一個不帶值的參數

在混合宏中，可以傳一個不帶任何值的參數，比如：

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

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

在調用的時候可以給這個混合宏傳一個參數值：

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

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

編譯出來的 CSS:

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

[Sass]混合宏-調用混合宏

在 Sass 中通過 @mixin 關鍵詞聲明了一個混合宏，那么在實際調用中，其匹配了一個關鍵詞“@include”來調用聲明好的混合宏。例如在你的樣式中定義了一個圓角的混合宏“border-radius”:

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

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

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

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

1、聲明混合宏

不帶參數混合宏：

其中?@mixin?是用來聲明混合宏的關鍵詞，有點類似 CSS 中的 @media、@font-face 一樣。border-radius?是混合宏的名稱。大括號里面是復用的樣式代碼。

帶參數混合宏：

復雜的混合宏：

[Sass]嵌套-偽類嵌套

避免選擇器嵌套：

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

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

[Sass]嵌套-屬性嵌套

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

在 Sass 中我們可以這樣寫：

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

[Sass]嵌套-選擇器嵌套

Sass 的嵌套分為三種：

• 選擇器嵌套

• 屬性嵌套

• 偽類嵌套

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

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

而定義在元素內部的變量是一個局部變量。

當在局部范圍（選擇器內、函數內、混合宏內...）聲明一個已經存在于全局范圍內的變量時，局部變量就成為了全局變量的影子?；旧?，局部變量只會在局部范圍內覆蓋全局變量。

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

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

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

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

sass變量調用

默認變量

sass 的默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可。
?

$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則表示默認值。

Sass 的變量包括三個部分：

1. 聲明變量的符號“$”

2. 變量名稱

3. 賦予變量的值

sass 調試

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

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

4. 壓縮輸出方式 compressed

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

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

3、嵌套輸出方式 compact

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

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

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

2、嵌套輸出方式 expanded

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

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

?1、嵌套輸出方式 nested

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

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