2016-08-07 5 views
0

初めてここでお尋ねします。SASS:セット高さのためのMIXIN

私は要素の高さを設定するために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 

または例えば

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

答えて

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

ので、高さの特殊な(5,2,4)は14 は、デフォルト値を返します。最後の2を残すことができますが返されます。

+0

それは素晴らしいです!どうもありがとう! – Colorkey

+0

問題を解決済みとしてマークしてください – bond708

0

それは素敵なソリューションですが、私はより多くのループのようなものを探していた。

.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でそれをやろうとしました。

関連する問題