2

小数を使用した複数の変数を持つ SASS @each ループに問題があります。基本的なレベルで動作させることはできますが、小数を追加したいので、エラーが発生します。

例えば..

$columns: 100, 25, 33;

@each $proportion in $columns {
  .col_#{nth($proportion, 1)} {
    width: percentage($proportion/100);
  }
}

... に正常にコンパイルされます...

.col_100 {
    width: 100%;
}

.col_25 {
    width: 25%;
}

.col_33 {
    width: 33%;
}

ただし、変数リストに小数を追加しようとすると、エラーが発生します。たとえば、これを機能させるにはどうすればよいですか...

$columns: 100, 25, 33.333;
4

1 に答える 1

2

クラス名の値を丸めることができます。

@each $proportion in $columns {
  .col_#{floor(nth($proportion, 1))} {
    width: percentage($proportion/100);
  }
}

出力:

.col_100 {
  width: 100%;
}

.col_25 {
  width: 25%;
}

.col_33 {
  width: 33.333%;
}
于 2013-04-03T00:26:15.593 に答える