@forのすべてを選択するscssを使用する

Question

すべての結果を選択してCSSラインに印刷できますか？

私の主な目標はこの動的なものにすることです。そのため、$列が12または8に切り替えられても、それらを1行にしたいと考えています。

2番目のコードブロックである.col-1、.col-2、.col-3、.col-4は2回印刷されていますが、上。

私はおそらくこれを書く別の方法を検討していましたが、私はこれをできるだけシンプルに保ちたいと思います。

.col-1 { 
    float: left; 
} 

$columns: 4; 

@for $col-width from 1 through $columns { 
    .col-#{$col-width} { 
    width: ((100/$columns) * $col-width) * 1%; 
    @extend .col-1; 
    } 
} 

このコードでは以下のようになります。今私の問題は、すべての.colが2回印刷されていることです。私は一度だけ見せたい。一度それを@extendにする方法や、より良い選択肢は何ですか？

.col-1, .col-2, .col-3, .col-4 { 
    float: left; 
    width: 100%; 
} 

.col-1, .col-2, .col-3, .col-4 { 
    width: 25%; 
} 

.col-2 { 
    width: 50%; 
} 

.col-3 { 
    width: 75%; 
} 

.col-4 { 
    width: 100%; 
} 

Answer 1

私はあなたが探しているものはplaceholder selectorですが、以下のように拡張できると思います。プレースホルダセレクタは、%が前面にあるセレクタであり、そのようなセレクタ+ルールはSassファイルにのみ存在します。このブロック自体は、コンパイル済みのCSSファイルには存在しません。これらのプレースホルダを拡張するセレクタは、プレースホルダセレクタ内にのプロパティがリストされ、不必要にCSSに追加されません。また、プレースホルダーセレクターのルールが@forループによって変更されることはないので、他の答えでも説明されている問題で終わることはありません。以下は

%float-left { 
    float: left; 
} 
$columns: 4; 
@for $col-width from 1 through $columns { 
    .col-#{$col-width} { 
    width: ((100/$columns) * $col-width) * 1%; 
    @extend %float-left; 
    } 
} 

コンパイルCSSは次のようになります方法です：あなたは、ワイルドカード属性セレクタ

// target all classes containing "col-" 
[class*="col-"]{ float: left; }  

$columns: 4; 
@for $col-width from 1 through $columns { 
    .col-#{$col-width} { 
    width: 100%/$columns * $col-width; 
    } 
} 

CSS出力を持つすべての列クラスをターゲット可能性が

.col-1, .col-2, .col-3, .col-4 { 
    float: left; 
} 
.col-1 { 
    width: 25%; 
} 
.col-2 { 
    width: 50%; 
} 
.col-3 { 
    width: 75%; 
} 
.col-4 { 
    width: 100%; 
} 

Answer 2

COL-1ループ最初通過しているので、その幅が（100％）最初の定義されているだろう。ループの最初の反復の後、それは次のようになります。ループを通る

.col-1 { 
    float: left; 
    width: 100%; 
} 

後続の反復は、が100％の幅を含ん.col-1で現在、あるものは何でも延長しようとします。

なぜ単にそのように@extendを取り除くと、ループ自体にフロートを定義？：

$columns: 4; 

@for $col-width from 1 through $columns { 
    .col-#{$col-width} { 
    width: ((100/$columns) * $col-width) * 1%; 
    float: left; 
    } 
} 

しないカラム1はまだ100％の幅を取得しますが、他の列ではないであろう。）

これが役に立ちます。

Answer 3

：

[class*="col-"] { float: left; } 
.col-1 { width: 25%; } 
.col-2 { width: 50%; } 
.col-3 { width: 75%; } 
.col-4 { width: 100%; }