自定義函數(shù)是用戶根據(jù)自己的一些特殊要求編寫的Sass函數(shù)蒂窒。在很多時(shí)候Sass自帶的函數(shù)并不能滿足功能上的需求龟劲，所以很多時(shí)候需要自定義一些函數(shù)梢薪。
如：需要去掉一個(gè)值的單位炒嘲，這種情況下宇姚，Sass自帶的函數(shù)是無(wú)法幫助我們完成的，這個(gè)時(shí)候就需要我們定義函數(shù)：
@function stripUnits($num){
@return $num/($num*0+1);
}
@function double($num){
@return $num*2;
}
.test{
content1:stripUnits(15px);
content2:double(5);
}
生成為：
.test {
content1: 15;
content2: 10; }
更嚴(yán)謹(jǐn)?shù)膶懛ǎ?/p>
@function stripUnits($num) {
@if not unitless($num) {
@return $num/($num*0+1);
}
@else {
@return $num;
}
}
@function double($num) {
@if type-of($num)=="number" {
@return $num*2;
}
@else {
@return $num;
}
}
.test {
content1: stripUnits(15px);
content2: double(5);
}
生成為：
.test {
content1: 15;
content2: 10; }
Sass高級(jí)用法
條件語(yǔ)句
@if 可以用來(lái)判斷,@else
p{
@if 1+1 == 2 { border:1px solid;}
}
==上面代碼與下面代碼寫法不一致單效果是一樣的
p{
@if(1+1 == 2){ border:1px solid;}
}
并且是and/&&,或用 or夫凸、去反用not
返回語(yǔ)句 @return
循環(huán)語(yǔ)句
for循環(huán)：
@for $i from to 10{
.border-#{$i} {
border: #{$i}px solid blue;
}
}
while循環(huán)：
$i:6;
@while $i>0 {
.item-#{$i} {
width: 2em * $i;
}
$i:$i - 2;
}
輸出為：
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
each循環(huán)：
@each $member in a, b, c, d{
.#{$member}{
background-image:url("image/#{$member}.jpg");
}
}
