資訊專欄INFORMATION COLUMN
摘要：普遍情況下這仨在實際項目中用得還是比較多的，玩起來吧混合宏如果你的代碼塊中涉及到變量，建議使用混合宏來創(chuàng)建相同的代碼塊。不足如果在樣式文件中調(diào)用同一個混合宏，會產(chǎn)生多個對應的樣式代碼，造成代碼的冗余。
1. 混合宏@mixin學習Sass無非就是想高效的、 面向?qū)ο缶帉慍SS，Sass中的@-Rules也是重要的一部分。
普遍情況下這仨在實際項目中用得還是比較多的，玩起來吧！
如果你的代碼塊中涉及到變量，建議使用混合宏來創(chuàng)建相同的代碼塊。
特點：可傳參。
不足：如果在樣式文件中調(diào)用同一個混合宏，會產(chǎn)生多個對應的樣式代碼，造成代碼的冗余。
SCSS：
.fl{
@include float(left)
div{
@include float(left)
}
}
.fr{
@include float(right)
}
實際生成的CSS：
.fl { float: left; }
.fl div { float: left; }
.fr { float: right; }
而我想要的是這樣的CSS：
.fl, .fl div { float: left; }
.fr { float: right; }
//相同的`CSS`不會合并...看來"你"也就只有傳參好使了！
SCSS：
@mixin br3{ /* 沒有傳參 */
border-radius: 3px;
}
@mixin br4($br4){ /* 傳一個不帶值的參數(shù) */
border-radius: $br4;
}
@mixin br6($br6: 6px){ /* 傳一個帶值的參數(shù) */
border-radius: $br6;
}
@mixin position-center($width, $height){ /* 傳多個參數(shù) */
width: $width;
height: $height;
position: absolute;
left: 50%;
top: 50%;
margin: (-($height)/2) 0 0 (-($width)/2);
}
div{
@include br4(4px); /* 調(diào)用混合宏 */
@include br3(); /* 沒有傳值3px */
@include br6(); /* 如果不傳值就是6px,傳值會覆蓋原始值 */
}
.pos-center{
@include position-center(600px, 300px);
}
2. 繼承@extend()
如果你的代碼塊不需要專任何變量參數(shù)，而且有一個基類已在文件中存在，那么建議使用 繼承。
不足：如果是類(.class)，不管有沒有調(diào)用(@extend)，在編譯的時候，都會生成對應的CSS。
.db{ display:block; }
div{ @extend .db }
生成的代碼：
.db, div{ display:block; } /* .db也生成出來 */
SCSS：
@mixin border-radius{
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
@include border-radius;
}
.box {
@extend .btn;
margin-bottom: 10px;
}
CSS：
/* 生成后的代碼 */
.btn, .box { -webkit-border-radius: 3px; border-radius: 3px; }
.box { margin-bottom: 5px; }
3. 占坑符%placeholder
占坑和繼承基本類似，唯一不同的是，相同的生成CSS塊并沒有在類中存在，而是額外聲明。
如果不調(diào)用已聲明的占位符，將不會產(chǎn)生任何CSS。
如果在不同選擇器調(diào)用占位符，那么編譯出來CSS將會把相同的代碼合并在一起。
不足：就是不能傳參啦！個人覺得%placeholder優(yōu)于@extend。
SCSS：
%mt15 {
margin-top: 15px;
}
%pt15{
padding-top: 15px;
}
.btn6 {
@extend %mt15;
@extend %pt15;
}
.block {
//@extend .btn6
@extend %mt15;
@extend %pt15;
}
CSS：
/* 生成的代碼 */
.btn6, .block { margin-top: 15px; }
.btn6, .block { padding-top: 15px; }
/* 然而不會和已有代碼合并，倒是合并啊 */
4. Reference API
SASS_REFERENCE — Sass Documentation #Directives
注：為了第一篇文章發(fā)布成功，回頭整理整理SASS。
如有不正之處，歡迎指正。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115150.html
摘要：變量聲明和調(diào)用這是的編程元素基礎(chǔ)之一。如下在最外層聲明的是全局變量，全局范圍內(nèi)可以調(diào)用，在中聲明的是的局部變量，只在內(nèi)部內(nèi)進行調(diào)用。生成的如下上面的內(nèi)容就是的基礎(chǔ)篇，進階篇的話會整理一下函數(shù)和方法規(guī)則相關(guān)的東西。 sass起源和簡介 css 其實不是一門編程語言， css 全稱 Cascading Style Sheets (層疊樣式表)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應...
閱讀 1971·2021-10-12 10:12
閱讀 3109·2019-08-30 15:44
閱讀 869·2019-08-30 15:43
閱讀 3016·2019-08-30 14:02
閱讀 2114·2019-08-30 12:54
閱讀 3530·2019-08-26 17:05
閱讀 2021·2019-08-26 13:34
閱讀 1076·2019-08-26 11:54
