35

グループ全体の親セレクターではなく、アンパサンドを使用して直接の親を選択する方法はありますか? 例えば：

.wrapper{
    background-color: $colour_nav_bg;
    h1{
        color: $colour_inactive;
        .active &{
            color: red;
        }
    }
}

コンパイルすると:

.wrapper h1{
    color: grey;
}

.active .wrapper h1{
    color: red
}

しかし、私が実際に欲しいのは:

.wrapper .active h1{
    color: red;
}

そのようにSCSSを書く唯一のオプションはありますか?

.wrapper{
    background-color: $colour_nav_bg;
    h1{
        color: $colour_inactive;
    }
    .active h1{
        color: red;
    }
}

HTML は次のようになります。

<ul class="wrapper">
    <li class="active">
        <h1>blah</h1>
    </li>
</ul>
4

6 に答える 6

12

次のような mixin を使用して、今日これを回避できます。

@mixin if-direct-parent($parent-selector) {
  $current-sequences: &;
  $new-sequences: ();

  @each $sequence in $current-sequences {
    $current-selector: nth($sequence, -1);
    $prepended-selector: join($parent-selector, $current-selector);
    $new-sequence: set-nth($sequence, -1, $prepended-selector);
    $new-sequences: append($new-sequences, $new-sequence, comma);
  }

  @at-root #{$new-sequences} {
    @content;
  }
}

は本質的にリストのリストであるため、&リスト関数 ( nth、set-nth、join、およびappend ) を使用して、必要なセレクター シーケンスを作成できます。次に@at-root、ルートレベルで新しいセレクターを出力するために使用します。使用方法は次のとおりです。

.grandparent-1,
.grandparent-2 {
  color: red;

  .child {
    color: blue;

    @include if-direct-parent('.parent') {
      color: green;
    }
  }
}

どちらが出力されますか:

.grandparent-1,
.grandparent-2 {
  color: red;
}
.grandparent-1 .child,
.grandparent-2 .child {
  color: blue;
}
.grandparent-1 .parent .child, .grandparent-2 .parent .child {
  color: green;
}
于 2015-06-06T21:37:57.690 に答える
9

これを書いている時点では、要素のルートの親ではなく、直接の親に対する Sass セレクターはありません。&（ご存知のように）ルートの親を選択するものがあります。拡張されるまでルールを非表示にする% プレースホルダー セレクターもあります。

Sass はオープンソースであるため、新しい「直接の親」セレクターを提供できます。

于 2013-07-24T19:03:04.737 に答える
5

@at-root コンテンツを {} でラップする必要があります

.wrapper {
    h1 {
        @at-root {
           .wrapper .active h1 {
                color: red;
           }
        }
    }
}
于 2017-01-12T10:55:30.123 に答える
-1

私はしばしばあなたが求めていることをしたいと思っていましたが、それはうまくいきません. しかし、Stylus ではそのようなことができると聞きました。@at-rootしかし、入れ子の木の外にテレポートするために使用できる別の方法があります。例えば：

.wrapper{
    h1{
        @at-root .wrapper .active h1 {
            color: red;
        }
    }
}

これは、次のようにコンパイルされます。

.wrapper .active h1 {
  color: red;
}

良い点は、組織的な目的のために、ネスト構造で論理的に意味のある場所にセレクターを保持することです。

于 2016-01-13T22:18:17.513 に答える