81

SASS の SCSS 構文を使用して動的グリッド システムを作成していますが、問題が発生しました。

私はグリッドシステムを次のように完全に動的にしようとしています:

$columns: 12;

次に、次のような列を作成します。

@mixin col-x {
  @for $i from 1 through $columns {
  .col-#{$i} { width: $column-size * $i; }
  }
}

どの出力:

.col-1 {
    width: 4.16667%;
  }

.col-2 {
    width: 8.33333%;
}
etc...

これはうまく機能しますが、次にやりたいことは、選択した $columns の数に基づいて、コンマで区切られた列クラスの長いリストを動的に生成することです。たとえば、次のようにしたいです。

.col-1,
.col-2,
.col-3,
.col-4,
 etc... {
float: left;
}

私はこれに疲れました：

@mixin col-x-list {
  @for $i from 1 through $columns - 1 {
  .col-#{$i}-m { float: left; }
  }
}

しかし、出力は次のとおりです。

.col-1 {
  float: left;
}
.col-2 {
  float: left;
}
etc...

ここでのロジックと、このようなものを作成するために必要な SCSS 構文に少しこだわっています。

誰にもアイデアはありますか？

4

3 に答える 3

25

質問が具体的に求めていることを実行する方法もあります。コンマで区切られたクラスのリストを生成 (および使用) します。D.アレクサンダーの回答はあなたの状況で完全に機能しますが、この質問を見ている人に別のユースケースがある場合に備えて、この代替案を投稿しています。

ペンのデモは次のとおりです。http://codepen.io/davidtheclark/pen/cvrxq

基本的に、Sass 関数を使用して目的を達成できます。具体的には、appendコンマで区切ってリストにクラスを追加unquoteし、クラス名のピリオドとのコンパイルの競合を回避するために使用しています。

したがって、私のミックスインは次のようになります。

@mixin col-x {
  $col-list: null;
  @for $i from 1 through $columns {
    .col-#{$i} {
      width: $column-size * $i;
    }
   $col-list: append($col-list, unquote(".col-#{$i}"), comma);
  }
  #{$col-list} {
    float: left;
  }
}
于 2013-10-03T14:15:43.723 に答える