sass - Sassでは、どのように親セレクターを参照し、祖父母を除外しますか?

Question

次のsassコードがあります：

.class{
    label{
        color:#fff;
        .disabled &{color:#333; }
    }
}

出力する

.disabled .class label

祖父母セレクターを含めずに親セレクターを出力する方法はありますか? そのようです：

.disabled label

Answer 1

親参照を使用するときに先祖セレクターから選択して選択する方法をSASSで知っている方法はありません。ただし、コードを少し再編成すると、同じ結果が得られます。

label {
    .class & {
        color: #fff;
    }

    .disabled & {
        color:#333;
    }
}

コンパイルすると:

.class label {
  color: #fff; }
.disabled label {
  color: #333; }

Answer 2

親セレクターは常に、ネストの前のレベルから解決されたセレクター全体への参照です。「親」または「祖父母」の概念はありません。特に、セレクターを連結したり、最後に親セレクターを使用したりすると、水が濁ります。

免責事項:本当に必要でない限り、これを行うことはお勧めしません。

Sass 3.4 以降では&、変数として使用してセレクターの一部を抽出できます。このように使用すると、文字列のリストのリストが取得されます (これはループなどで使用できます)。

セレクターの一部またはスライスの抽出

この関数は、string-slice 関数と同じスタイルの引数を使用します。

@function selector-slice($sel, $start: 1, $end: -1) {
    $collector: ();
    @each $s in $sel {
        // calculate our true start and end indices when given negative numbers
        $_s: if($start > 0, $start, length($s) + $start + 1);
        $_e: if($end > 0, $end, length($s) + $end + 1);
        $c: ();
        @for $i from $_s through $_e {
            $c: append($c, nth($s, $i));
        }
        // prevent duplicates from creeping in
        @if not index($collector, $c) {
            $collector: append($collector, $c);
        }
    }
    @return $collector;
}

/* complex example */
.one-a, .one-b {
    two {
        three {
            color: red;

            &:before {
                @at-root #{selector-slice(&, 2, 3)} {
                    color: green;
                }
            }
        }
    }
}

/* your example */
.class {
    label {
        color:#fff;
        @at-root #{selector-slice(&, -1, -1)} {
            .disabled & {
                color:#333;
            }
        }
    }
}

出力：

/* complex example */
.one-a two three, .one-b two three {
  color: red;
}
two three:before {
  color: green;
}

/* your example */
.class label {
  color: #fff;
}
.disabled label {
  color: #333;
}

追加のボーナスとして、この関数を使用して、小さい方のインデックスの前に大きい方のインデックスを渡すことにより、セレクターの順序を逆にすることができます。

.one-a, .one-b {
    two {
        three {
            color: red;

            &:before {
                @at-root #{selector-slice(&, 3, 2)} {
                    color: green;
                }
            }
        }
    }
}

出力：

.one-a two three, .one-b two three {
  color: red;
}
three:before two {
  color: green;
}

関連: Sass でセレクターの中央を変更する (クラスの追加/削除など)

あるクラスを別のクラスに置き換える

selector-replaceまたは、あるクラスを別のクラスに置き換えたい場合は、標準ライブラリの関数を使用することもできます。

.class {
    label {
        color:#fff;
        @at-root #{selector-replace(&, '.class', '.disabled')} {
            color:#333;
        }
    }
}

出力：

.class label {
  color: #fff;
}
.disabled label {
  color: #333;
}