$content: "Hello" + " " + "Sass!";
.box:before {
content: #{$content} ;
}
輸出:
.box:before {
content: Hello Sass!;
}
.box:before {
content: #{$content} ;
}
輸出:
.box:before {
content: Hello Sass!;
}
2017-11-13
.box {
width: ((220px + 720px) - 11 * 20 ) / 12 ;
}
加減乘除運(yùn)算的單位:如果兩個(gè)數(shù)值單位不一致,會(huì)按照第一個(gè)數(shù)值的單位作為結(jié)果輸出
width: ((220px + 720px) - 11 * 20 ) / 12 ;
}
加減乘除運(yùn)算的單位:如果兩個(gè)數(shù)值單位不一致,會(huì)按照第一個(gè)數(shù)值的單位作為結(jié)果輸出
2017-11-13
“ 的默認(rèn)變量一般是用來設(shè)置默認(rèn)值,然后根據(jù)需求來覆蓋的,覆蓋的方式也很簡(jiǎn)單,只需要在默認(rèn)變量之前重新聲明下變量即可。”
摘抄自網(wǎng)絡(luò):連續(xù)聲明兩個(gè)default也是有效的,第一個(gè)default會(huì)被第二個(gè)default覆蓋。第二個(gè)default會(huì)被沒有聲明default的變量覆蓋,所以最終輸出的是沒有聲明default的變量。
摘抄自網(wǎng)絡(luò):連續(xù)聲明兩個(gè)default也是有效的,第一個(gè)default會(huì)被第二個(gè)default覆蓋。第二個(gè)default會(huì)被沒有聲明default的變量覆蓋,所以最終輸出的是沒有聲明default的變量。
2017-11-12
&挺好用的
例如,我們a標(biāo)簽,原來是red,點(diǎn)擊后變成blue
html中
<body>
<div>
<a href="#">a</a>
</div>
</body>
在scss中
div{
a{
color:$color;
}
& .active{
color:blue;
}
}
這樣&的作用就來,只需要點(diǎn)擊為a標(biāo)簽加入class,只是自己的一點(diǎn)小小的體會(huì)。
例如,我們a標(biāo)簽,原來是red,點(diǎn)擊后變成blue
html中
<body>
<div>
<a href="#">a</a>
</div>
</body>
在scss中
div{
a{
color:$color;
}
& .active{
color:blue;
}
}
這樣&的作用就來,只需要點(diǎn)擊為a標(biāo)簽加入class,只是自己的一點(diǎn)小小的體會(huì)。
2017-11-09
@mixin box-shadow($shadow...){
@if length($shadow)<1
{
$shadow:0 0 2px rgba(#000,.4);
}
box-shadow:$shadow;
}
.box{
@include box-shadow(0 0 3px rgba(#fff,.4));
}
@if length($shadow)<1
{
$shadow:0 0 2px rgba(#000,.4);
}
box-shadow:$shadow;
}
.box{
@include box-shadow(0 0 3px rgba(#fff,.4));
}
2017-11-08
第一:空格字符串拼接也要打出來,而且空多少格編譯后就有多少格;
第二:對(duì)于有連字符'-'的屬性值可以通過拆開連接。但要遵循的前提是,拆開后的詞不能是關(guān)鍵詞。
如:cursor:not -resize;會(huì)報(bào)錯(cuò),因?yàn)閚ot在sass有他的用途。
可以改成cursor:not- + resize;就不會(huì)報(bào)錯(cuò)了。
第二:對(duì)于有連字符'-'的屬性值可以通過拆開連接。但要遵循的前提是,拆開后的詞不能是關(guān)鍵詞。
如:cursor:not -resize;會(huì)報(bào)錯(cuò),因?yàn)閚ot在sass有他的用途。
可以改成cursor:not- + resize;就不會(huì)報(bào)錯(cuò)了。
2017-10-24
$box-width: 200px;
$box-height: 300px;
body {
width: $box-width;
height: $box-height;
}
$box-height: 300px;
body {
width: $box-width;
height: $box-height;
}
2017-10-22
回復(fù)一下樓下的。
當(dāng)你達(dá)到一定的高度時(shí),其他的先不講,代碼行數(shù)上千,你就知道sass的強(qiáng)大了。
當(dāng)你達(dá)到一定的高度時(shí),其他的先不講,代碼行數(shù)上千,你就知道sass的強(qiáng)大了。
2017-10-16