資訊專欄INFORMATION COLUMN
摘要：普遍情況下這仨在實(shí)際項(xiàng)目中用得還是比較多的，玩起來吧混合宏如果你的代碼塊中涉及到變量，建議使用混合宏來創(chuàng)建相同的代碼塊。不足如果在樣式文件中調(diào)用同一個(gè)混合宏，會(huì)產(chǎn)生多個(gè)對(duì)應(yīng)的樣式代碼，造成代碼的冗余。
1. 混合宏@mixin學(xué)習(xí)Sass無非就是想高效的、 面向?qū)ο缶帉慍SS，Sass中的@-Rules也是重要的一部分。
普遍情況下這仨在實(shí)際項(xiàng)目中用得還是比較多的，玩起來吧！
如果你的代碼塊中涉及到變量，建議使用混合宏來創(chuàng)建相同的代碼塊。
特點(diǎn)：可傳參。
不足：如果在樣式文件中調(diào)用同一個(gè)混合宏，會(huì)產(chǎn)生多個(gè)對(duì)應(yīng)的樣式代碼，造成代碼的冗余。
SCSS：
.fl{
@include float(left)
div{
@include float(left)
}
}
.fr{
@include float(right)
}
實(shí)際生成的CSS：
.fl { float: left; }
.fl div { float: left; }
.fr { float: right; }
而我想要的是這樣的CSS：
.fl, .fl div { float: left; }
.fr { float: right; }
//相同的`CSS`不會(huì)合并...看來"你"也就只有傳參好使了！
SCSS：
@mixin br3{ /* 沒有傳參 */
border-radius: 3px;
}
@mixin br4($br4){ /* 傳一個(gè)不帶值的參數(shù) */
border-radius: $br4;
}
@mixin br6($br6: 6px){ /* 傳一個(gè)帶值的參數(shù) */
border-radius: $br6;
}
@mixin position-center($width, $height){ /* 傳多個(gè)參數(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,傳值會(huì)覆蓋原始值 */
}
.pos-center{
@include position-center(600px, 300px);
}
2. 繼承@extend()
如果你的代碼塊不需要專任何變量參數(shù)，而且有一個(gè)基類已在文件中存在，那么建議使用 繼承。
不足：如果是類(.class)，不管有沒有調(diào)用(@extend)，在編譯的時(shí)候，都會(huì)生成對(duì)應(yīng)的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)用已聲明的占位符，將不會(huì)產(chǎn)生任何CSS。
如果在不同選擇器調(diào)用占位符，那么編譯出來CSS將會(huì)把相同的代碼合并在一起。
不足：就是不能傳參啦！個(gè)人覺得%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; }
/* 然而不會(huì)和已有代碼合并，倒是合并啊 */
4. Reference API
SASS_REFERENCE — Sass Documentation #Directives
注：為了第一篇文章發(fā)布成功，回頭整理整理SASS。
如有不正之處，歡迎指正。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115150.html
摘要：變量聲明和調(diào)用這是的編程元素基礎(chǔ)之一。如下在最外層聲明的是全局變量，全局范圍內(nèi)可以調(diào)用，在中聲明的是的局部變量，只在內(nèi)部內(nèi)進(jìn)行調(diào)用。生成的如下上面的內(nèi)容就是的基礎(chǔ)篇，進(jìn)階篇的話會(huì)整理一下函數(shù)和方法規(guī)則相關(guān)的東西。 sass起源和簡介 css 其實(shí)不是一門編程語言， css 全稱 Cascading Style Sheets (層疊樣式表)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)...
摘要：以前看到之類的工具覺得應(yīng)該比較難，今天接觸了之后發(fā)現(xiàn)挺好用的，主要是方便了的編寫。具體可以看慕課網(wǎng)教程編譯方法在命令行輸入編譯單個(gè)文件編譯整個(gè)文件夾到文件夾也就是這樣的語法下文中我都這樣寫。這里貼一張慕課網(wǎng)拿到的表格。 以前看到SASS之類的工具覺得應(yīng)該比較難，今天接觸了之后發(fā)現(xiàn)挺好用的，主要是方便了CSS的編寫。在編寫比較大的項(xiàng)目的時(shí)候，由于內(nèi)容很多，因此樣式表也會(huì)比較繁雜，如果要修...
摘要：和的區(qū)別文件擴(kuò)展名不同和是以嚴(yán)格縮進(jìn)式語法規(guī)則來書寫的，不帶大括號(hào)和分號(hào)而的語法和書寫語法類似。單行注釋，只保留在源文件中，編譯后被省略。在后面加一個(gè)感嘆號(hào)，表示這是重要注釋。重要聲明繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器，使用命令。 1. SASS和SCSS的區(qū)別 文件擴(kuò)展名不同：.sass和.scss； SASS是以嚴(yán)格縮進(jìn)式語法規(guī)則來書寫的，不帶大括號(hào)和分號(hào)；而SCSS的語法和C...
摘要：和的區(qū)別文件擴(kuò)展名不同和是以嚴(yán)格縮進(jìn)式語法規(guī)則來書寫的，不帶大括號(hào)和分號(hào)而的語法和書寫語法類似。單行注釋，只保留在源文件中，編譯后被省略。在后面加一個(gè)感嘆號(hào)，表示這是重要注釋。重要聲明繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器，使用命令。 1. SASS和SCSS的區(qū)別 文件擴(kuò)展名不同：.sass和.scss； SASS是以嚴(yán)格縮進(jìn)式語法規(guī)則來書寫的，不帶大括號(hào)和分號(hào)；而SCSS的語法和C...
閱讀 2010·2021-10-12 10:12
閱讀 3137·2019-08-30 15:44
閱讀 894·2019-08-30 15:43
閱讀 3056·2019-08-30 14:02
閱讀 2155·2019-08-30 12:54
閱讀 3564·2019-08-26 17:05
閱讀 2052·2019-08-26 13:34
閱讀 1107·2019-08-26 11:54
