HTMLからのSASSの動的値

Question

以前は、私は速い開発を助けるためにヘルパーCSSを作成しました。 ヘルパーCSSの内容は次のようでした：

.margin-10{ 
    margin:10px!important; 
} 
..... 

とHTMLで私は<div class="margin-10"></div>

を使用することができます。しかし、その後SASSを発見し、それは驚くべきことです。特に、ミックスインの機能を速く開発するのに本当に役立ちました。しかし、私は問題があります。 ここにシナリオがあります。

SCSSミックスインは次のとおりです。HTMLで

@mixin border-radius($radius) { 
-webkit-border-radius: $radius; 
-moz-border-radius: $radius; 
    -ms-border-radius: $radius; 
     border-radius: $radius; 
} 

.box { 
    @include border-radius(10px); 
} 

私は<div class="box"></div>

を使用することができ、動的なクラスを作成するには、任意の可能性はありますか？ たとえば、<div class="margin-left-10"></div>を使用すると、mixinを使用してleft left classが自動的に作成されます。 私が使用している場合は<div class="padding-top-100"></div>パディングトップ-100クラスが自動的に作成され、ここでSASSにあなたを助けることができるミックスインのmixin

Answer 1

を使用して操作されていますので、あなただけの40ピクセルを持っている<div class="XXX margin-top-40"></div>を使用する必要があります

@mixin createMargin($min, $max) 
    @for $i from $min to $max+1 
    .margin-#{$i} 
     margin : 1px * $i !important 

    .margin-top-#{$i} 
     margin-top: 1px * $i !important 

    .margin-left-#{$i} 
     margin-left : 1px * $i !important 

    .margin-right-#{$i} 
     margin-right: 1px * $i !important 

    .margin-bottom-#{$i} 
     margin-bottom: 1px * $i !important 

@include createMargin(0, 100) // Choose your min and max value 

をあなたの部門のマージントップ