SASS：設定高度的MIXIN

Question

第一次在這裏問。

我試圖讓一些MIXIN爲了設置一個元素的高度。

例如< span class="space h5" ></span>在CSS，這將是：

$size: 1px; 

.space { 

display: block; 

} 

.space.x5 { 

height: $size * 5; 

} 

所以我的問題，是有可能創造一個mixin倍增，加起來或減去連班金額？

例如

< span class=" space h5 x2 add4 "></span> ====> height: 14px 

或：

< span class=" space h5 x4 subtract2 "></span> ====> height: 18px 

非常感謝！

問候。

Answer 1

@mixin height-special($default,$multiplier: 1,$extra: 0) { 
    height: ($default*$multiplier+$extra) + px; 
} 

所以，高特（5,2,4）將返回14 你可以離開了最後2將返回默認值。

Answer 2

這是一個很好的解決方案，但我一直在尋找的東西更像是一個循環：

.space { 
    display: block; 
    clear: both; 
} 

$space-base: 5px; 

/*multipliers*/ 
@for $space-base from 1 through 100 { 
    .h5x#{$space-base} { 
    height: $space-base * 5px; 
    } 
} 

/*add*/ 
.h5x2.add-1 { 
    height: ($space-base * 2 + 1); 
} 
.h5x2.add-2 { 
    height: ($space-base * 2 + 2); 
} 
.h5x2.add-3 { 
    height: ($space-base * 2 + 3); 
} 
.h5x2.add-4 { 
    height: ($space-base * 2 + 4); 
} 
.h5x2.add-5 { 
    height: ($space-base * 2 + 5); 
} 
.h5x2.add-6 { 
    height: ($space-base * 2 + 6); 
} 
.h5x2.add-7 { 
    height: ($space-base * 2 + 7); 
} 
.h5x2.add-8 { 
    height: ($space-base * 2 + 8); 
} 
.h5x2.add-9 { 
    height: ($space-base * 2 + 9); 
} 
/*subtract*/ 
.h5x2.sub-1 { 
    height: ($space-base * 2 - 1); 
} 

我試圖避免用手所有的組合，並與上海社會科學院做。