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

什么時候用混合宏？

答：當你在不同的class里調用宏時，不同的class數值不同，就需要傳遞不同的數值，這是用混合宏。

什么時候用繼承？

答：如果你的代碼塊不需要專任何變量參數，而且有一個基類已在文件中存在，那么建議使用 Sass 的繼承。使用繼承后，編譯出來的 CSS 會將使用繼承的代碼塊合并到一起，通過組合選擇器的方式向大家展現，

//聲明混合宏
?border-radius{
????-webkit-border-radius:?3px;
????border-radius:?3px;
}
//調用混合宏
button?{
?????border-radius;
}

@mixin //聲明混合宏

邏輯關系：@if? @else

& //父選擇器

注釋對于一名程序員來說，是極其重要，良好的注釋能幫助自己或者別人閱讀源碼。在 Sass 中注釋有兩種方式，我暫且將其命名為：

1、類似 CSS 的注釋方式，使用 ”/* ”開頭，結屬使用 ”*/ ”
2、類似 JavaScript 的注釋方式，使用“//”

兩者區別，前者會在編譯出來的 CSS 顯示，后者在編譯出來的 CSS 中不會顯示.

scss命令編譯

[Sass]字符串

SassScript 支持 CSS 的兩種字符串類型：

• 有引號字符串 (quoted strings)，如?"Lucida Grande"?、'http://sass-lang.com'；

• 無引號字符串 (unquoted strings)，如?sans-serifbold。

在編譯 CSS 文件時不會改變其類型。只有一種情況例外，使用?#{ }插值語句 (interpolation) 時，有引號字符串將被編譯為無引號字符串，這樣方便了在混合指令 (mixin) 中引用選擇器名。

@mixin?firefox-message($selector)?{
??body.firefox?#{$selector}:before?{
????content:?"Hi,?Firefox?users!";
??}
}
@include?firefox-message(".header");

編譯為：

body.firefox?.header:before?{
??content:?"Hi,?Firefox?users!";?}

[Sass]數據類型

• ?數字: 如，1、?2、?13、?10px；

• ?字符串：有引號字符串或無引號字符串，如，"foo"、'bar'、?baz；

• ?顏色：如，blue、?#04a3f9、?rgba(255,0,0,0.5)；

• ?布爾型：如，true、?false；

• ?空值：如，null；

• ?值列表：用空格或者逗號分開，如，1.5em 1em 0 2em?、?Helvetica, Arial, sans-serif。

[Sass]插值#{}

可以使用 @extend 中使用插值

[Sass]混合宏 VS 繼承 VS 占位符

a) Sass 中的混合宏使用

總結：編譯出來的 CSS 清晰告訴了大家，他不會自動合并相同的樣式代碼，如果在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，造成代碼的冗余，這也是 CSSer 無法忍受的一件事情。不過他并不是一無事處，他可以傳參數。

個人建議：如果你的代碼塊中涉及到變量，建議使用混合宏來創建相同的代碼塊。

b) Sass 中繼承

總結：使用繼承后，編譯出來的 CSS 會將使用繼承的代碼塊合并到一起，通過組合選擇器的方式向大家展現，比如 .mt, .block, .block span, .header, .header span。這樣編譯出來的代碼相對于混合宏來說要干凈的多，也是 CSSer 期望看到。但是他不能傳變量參數。

個人建議：如果你的代碼塊不需要專任何變量參數，而且有一個基類已在文件中存在，那么建議使用 Sass 的繼承。

c) 占位符

總結：編譯出來的 CSS 代碼和使用繼承基本上是相同，只是不會在代碼中生成占位符 mt 的選擇器。那么占位符和繼承的主要區別的，“占位符是獨立定義，不調用的時候是不會在 CSS 中產生任何代碼；繼承是首先有一個基類存在，不管調用與不調用，基類的樣式都將會出現在編譯出來的 CSS 代碼中?！?/p>

[Sass]占位符 %placeholder

ass 中的占位符?%placeholder 功能是一個很強大，很實用的一個功能，這也是我非常喜歡的功能。他可以取代以前 CSS 中的基類造成的代碼冗余的情形。因為 %placeholder 聲明的代碼，如果不被 @extend 調用的話，不會產生任何代碼。

從編譯出來的 CSS 代碼可以看出，通過 @extend 調用的占位符，編譯出來的代碼會將相同的代碼合并在一起

[Sass]擴展/繼承

在 Sass 中是通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現代碼的繼承

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

編譯出來之后：

//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]混合宏的參數--混合宏的不足

混合宏在實際編碼中給我們帶來很多方便之處，特別是對于復用重復代碼塊。但其最大的不足之處是會生成冗余的代碼塊。

[Sass]混合宏的參數--傳多個參數

有一個特別的參數“…”。當混合宏傳的參數過多之時，可以使用參數來替代

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

在 Sass 的混合宏中，還可以給混合宏的參數傳一個默認值，例如：

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

在混合宏“border-radius”傳了一個參數“$radius”，而且給這個參數賦予了一個默認值“3px”。

在調用類似這樣的混合宏時，會多有一個機會，假設你的頁面中的圓角很多地方都是“3px”的圓角，那么這個時候只需要調用默認的混合宏“border-radius”:

.btn?{
??@include?border-radius;
}

編譯出來的 CSS:

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