3

1 から 12 までループして、アプリの特定のビューの変更されたグリッドのスパン幅を出力しようとしています。

$span-width: 8.21875%;
$gap: 0.125%;
@for $i from 1 through 12 {
  $span-width: ($i * $span-width) + ($i * $gap) ;
  .span#{$i}{
    width: $span-width;     
 }
}

これは出力しています

.span6 {
  width: 6162%;
}

通常の算術規則を使用して幅を計算する sass を作成するにはどうすればよいですか?

4

2 に答える 2

4

必要な式は次のとおり ($i * ($span-width / 1%)) + ($i * ($gap / 1%))です。$span-widthまたは、 /$gap変数から％を削除することもできます。

編集：式への変数の割り当てが機能しない理由がわかりません（@debugを使用してのみテストしました）

$span-width: 8.21875%;
$gap: 0.125%;
@for $i from 1 through 12 {
    @debug (($i * ($span-width / 1%)) + ($i * ($gap / 1%))) * 1%;
    .span#{$i}{
        width: (($i * ($span-width / 1%)) + ($i * ($gap / 1%))) * 1%;
    }
}

これを生成します：

.span1{width:8.34375%}
.span2{width:16.6875%}
.span3{width:25.03125%}
.span4{width:33.375%}
.span5{width:41.71875%}
.span6{width:50.0625%}
.span7{width:58.40625%}
.span8{width:66.75%}
.span9{width:75.09375%}
.span10{width:83.4375%}
.span11{width:91.78125%}
.span12{width:100.125%}

本当に変数を再利用する必要がある場合は、その関数の作成を検討することをお勧めします。

于 2012-10-15T11:50:50.830 に答える
0

そこで、小数を使用し、パーセンテージ関数を使用して％（小数点以下を移動）に切り替えて単位を設定することで、問題を解決しました。

$one-span-width: 0.0821875;
$gap: 0.00125;
@for $i from 1 through 12 {
 $span-width:  ($one-span-width * $i) + ($gap * $i) ;    
 .span#{$i}{
  width: percentage($span-width);     
 }
}
于 2012-10-15T22:48:22.897 に答える