-1

比率セマンティクスを使用してグリッド設定を作成する Sass ループを作成しようとしています。

私は始めました：

$columns:       12 !default;  

@mixin widths-setup($namespace: "") {
    @for $i from 1 through $columns { 
        .width-#{$i} { 
            width: percentage($i/$columns); 
        } 
    }
}

これは以下を生成します:

.width-1 {  width: 8.33333%; }

.width-2 {  width: 16.66667%; }

...

.width-12 {  width: 100%; }

おそらく@if条件を使用して、私が生成したいのは

.width-1-1 {  width: 100%; }

.width-1-2 {  width: 50%; }

.width-2-2 {  width: 100%; }

.width-1-3 {  width: 33.3333%; }

.width-2-3 {  width: 66.66667%; }

.width-3-3 {  width: 100%; }

...

.width-1-12 {  width: 8.3333%; }

.width-2-12 {  width: 16.6666%; }

.width-3-12 {  width: 25%; }

...

.width-12-12 {  width: 100%; }

各クラスは幅で始まり、2 番目の数値はループの各ステップで {$i} に等しくなるまで 1 ずつ増加し、3 番目の数値は {$i} の増加であり、$columns 変数に割り当てられた数値で停止します。

不要なクラス (width-1-1、width-2-2、width-3-3 など) はすべて同じ幅になりますが、現時点ではその肥大化は関係ありません。

4

1 に答える 1

2 
$columns: 12 !default;  

@mixin widths-setup($namespace: "") {
    @for $i from 1 through $columns { 
        $cols: $i;
        @for $k from 1 through $cols { 
            .width-#{$k}-#{$i} {
                width: percentage($k/$cols); 
            }
        }
    }
}

これにより、期待される（ただし肥大化した）結果が出力されるはずです。

于 2013-09-20T13:48:56.403 に答える