SASS：セット高さのためのMIXIN

Question

初めてここでお尋ねします。

私は要素の高さを設定するためにMIXINのsomekindを作ろうとしています。

たとえば< span class="space h5" ></span>についてCSSで、これは次のようになります。

$size: 1px; 

.space { 

display: block; 

} 

.space.x5 { 

height: $size * 5; 

} 

だから私の質問は、それはクラスと金額を、乗算加算または減算するミックスインを作成することは可能でしょうか？

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

どうもありがとう：

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

または例えば

！

よろしくお願いいたします。

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); 
} 

私は手ですべての組み合わせを避け、SASSでそれをやろうとしました。