8

私のスタイルシートは次のようになります。

.thing-1 { background-image: url('top.png'); }
.thing-2 { background-image: url('top.png'); }
.thing-3 { background-image: url('top.png'); }
/* etc... */

これに続いて：

.thing-20 { background-image: url('bottom.png'); }
.thing-21 { background-image: url('bottom.png'); }
.thing-22 { background-image: url('bottom.png'); }
/* etc... */

LESS などでスタイルシートを単純化する方法を探しています。これが私がやりたいことです：

.thing-[i < 15] { background-image: url('top.png'); }
.thing-[i >= 15] { background-image: url('bottom.png'); }

LESSでこのようなことを行う方法はありますか? LESSではない場合、おそらくSASSですか？

4

4 に答える 4

12

LESS と Sass を求めているので、ここにいくつかの解決策があります。@for値をループすることで両方でそれを実現できますが、Sass は、@if、@whileなどの制御ディレクティブが組み込まれているため、このフィールドでは少し強力@eachです。もちろん、これを実装する方法は複数ありますが、最初に思いついたのは次のとおりです。

以下：

.bg (@i) when (@i < 15) { background-image: url('top.png'); }
.bg (@i) when (@i >= 15) { background-image: url('bottom.png'); }

.things (@max, @i: 1) when (@i < @max) {
  .thing-@{i} { .bg (@i); }
  .things (@max, (@i + 1));
}

.things(50);

およびSCSS:

@function bg($i) {
  @if $i < 15 { @return 'top.png' }
  @else { @return 'bottom.png' }
}

@for $i from 1 through 50 {
  .thing-#{$i} { background-image: url(bg($i)); }
}

正確な出力を達成する場所。

しかし、より乾燥した出力は次のように達成されます:

LESS: @seven-phases-max の回答を参照してください。.thing-15ただし、アイテムが15個未満の場合でも、常に印刷する必要があるという問題があります. .thing-15次のように、必要な場合にのみ追加する別のガードを追加しない限り:

.thing(@i) when (@i = 15) {
    .thing-15 {background-image: url('bottom.png')}
}

less2css.orgで Less ソリューションを試すことができます。

またはSCSS:

%bg-top { background-image: url('top.png'); }
%bg-bottom { background-image: url('bottom.png'); }

@for $i from 1 through 50 {
  .thing-#{$i} {
    @if $i < 15 { @extend %bg-top; }
    @else { @extend %bg-bottom; }
  }
}

私の意見では、最後のものは最もエレガントなソリューションです。

デモ

于 2013-11-02T00:10:59.800 に答える
5

状況によっては特に必要ないプリプロセッサ

更新:クラスの両側に追加のクラスを許可するために、ソリューションを完全に一般化しましたthing-#。

これは、扱っている数値ではかなり実用的です。基本的に、テクニックは私がこの質問に答えたものと似ていますが、あなたの場合、コードは次のとおりです(ここでは、背景色を使用した微調整した例を示します):

[class*="thing-"] {
    background-image: url('top.png');
}

[class*="thing-1"]:not(.thing-1):not(.thing-10):not(.thing-11):not(.thing-12):not(.thing-13):not(.thing-14),
[class*="thing-2"]:not(.thing-2),
[class*="thing-3"]:not(.thing-3),
[class*="thing-4"]:not(.thing-4),
[class*="thing-5"]:not(.thing-5),
[class*="thing-6"]:not(.thing-6),
[class*="thing-7"]:not(.thing-7),
[class*="thing-8"]:not(.thing-8),
[class*="thing-9"]:not(.thing-9) {
    background-image: url('bottom.png');
}

複数の数値で「一般的な」選択を行う場合は属性セレクターを使用し、一般的なものを適用しない特定のクラスを除外します。

CSSをさらに減らすことができます

クラスを変更1-9して前にゼロ (など) を付けるとthing-01、thing-02一般的な cssをさらに次のように減らすことができます。

[class*="thing-"] {
    background-image: url('top.png');
}

[class*="thing-"]:not([class*="thing-0"]):not(.thing-10):not(.thing-11):not(.thing-12):not(.thing-13):not(.thing-14) {
    background-image: url('bottom.png');
}

実用上の限界

非常に多数のブレークポイントが必要な場合、より多くのフィルタリングが必要になるため、これはすべて非常に面倒になります。しかし、他の質問に対する私の最初の回答が示したように、ブレークのためにさらに大きなレベルを達成することができます。その時点で、出力 CSS を低く保ちながら、おそらく LESS または SCSS を使用して何らかの方法でブレーク ポインティングを行うことが可能かもしれません。

于 2013-11-02T01:46:43.440 に答える
4

はい、LESSでこれを行うことができます。ただし、コードは少し怖いです (基本的には、高度な LESS の概念を学ぶ必要があります)。そのため、ユースケースがそれほど単純な場合は、これらを手動で記述することをお勧めします (@Ashkan の提案に従って)。

LESS コード:

.thing-1  {background-image: url('top.png')}
.thing-15 {background-image: url('bottom.png')}

.thing(@i) when (@i < 15) {
    .thing-@{i} {&:extend(.thing-1);}
}
.thing(@i) when (@i > 15) {
    .thing-@{i} {&:extend(.thing-15);}
}

.generate-things(@i) when (@i > 1) {
    .generate-things((@i - 1));
    .thing(@i);
}

.generate-things(30);
于 2013-11-02T00:09:47.943 に答える
2

あなたはどちらかを行うことができます

.thing-1,.thing-2,.thing-3,... { background-image: url('top.png'); }
.thing-20,.thing-21,.thing-22,... { background-image: url('bottom.png'); }

要素に複数のクラスを使用できます。

.top { background-image: url('top.png'); }
.bottom { background-image: url('bottom.png'); }
.thing-1 { /*only thing-1 related css code*/}
.thing-2 { /*only thing-2 related css code*/}

次のように使用します。

<div class="top thing-1"></div>
<div class="bottom thing-1"></div>
于 2013-11-01T23:41:09.393 に答える