2

さて、これは私が取得したい出力です:

.class-1, .class-2, .class-3 {
    z-index: 1;
}

.class-1-et-cetera, .class-2-et-cetera, .class-3-et-cetera {
    z-index: 5;
}

&そして、セレクターをネストし、SASS の本当に素晴らしい機能を使用して親セレクターを取得することで、それを取得したいと考えています。だから私はこのようなことを試みてきました(SASS構文が最初):

.class-1, .class-2, .class-3
    z-index: 1
    &-et-cetera
        z-index: 5

SCSS 構文:

.class-1, .class-2, .class-3 {
    z-index: 1;
    &-et-cetera {
        z-index: 5;
    }
}

唯一の問題は、それが機能しないことです。の後のテキストをいじってみました... 、、 ... の&ようなものです。&#{"-et-cetera"}&#{-et-cetera}& + "-et-cetera"

可能だと思ったのですが、なかなか見つかりません。それを行う方法はありますか？

4

1 に答える 1

6

要素が複数のクラスを持つことができるという事実を利用することを検討してください。

<div class="class-1 et-cetera"></div>
<div class="class-1"></div>
<div class="class-2 et-cetera"></div>
<div class="class-3"></div>
...

.class-1, .class-2, .class-3
  z-index: 1

.et-cetera 
  z-index: 5

これは、Sass などを使用した CSS ではありません。

追加の特異性が必要な場合は、次のようにいつでもネストできます。

.class-1, .class-2, .class-3
  z-index: 1
  &.et-cetera 
    z-index: 5

それはあなたに与えるでしょう：

.class-1, .class-2, .class-3 {
    z-index: 1;
}
.class-1.et-cetera, .class-2.et-cetera, .class-3.et-cetera {
    z-index: 5;
}

編集

本当にSassでやりたいのなら、これを行うことができますが、これはお勧めしません:

%class
  z-index: 1

%etc
  z-index: 5

@each $i in class-1, class-2, class-3
  .#{$i}
    @extend %class
  .#{$i}-et-cetera
    @extend %etc

2 つの異なるクラスを使用する方が、はるかに簡単で、柔軟で、将来性があると思います。

于 2013-03-29T14:21:22.837 に答える