Sassアンパサンドと属性セレクタ

Question

セレクタが属性セレクタとなるsassファイルを作成したいとします。 .parent-child {}：

私はクラスセレクタで作業

、ほとんどの場合、私は私に次のCSSを与える

.parent { 
    &-child { 
    } 
} 

を行います。

私は、属性セレクタと同じことを達成したい：

私はなりたい

[data-parent] { 
    &-child { 
    } 
} 

：[data-parent-child] {}

誰かがこれを達成する方法を知っていますか？ありがとう。

Answer 1

あなたは望ましい結果を得るために、回避策としてこのmixinを使用することができます。

@mixin child-attribute($child) { 
    $string: inspect(&); 
    $original: str-slice($string, 3, -4); 
    @at-root #{ selector-replace(&, &, "[#{$original}#{$child}]") } { 
    @content; 
    } 
} 

コードは単純に以下の

1. $文字列変数がinspect機能を使用して文字列に親セレクターを回すために責任があるん
2. $元変数は、取得するための責任がありますテキスト$string変数iの内容。
3. 関数は、次の方法で使用

可変$original変数の連結及びchildと親セレクタを置き換えるセレクタ置き換える'([data-parent])'からE値'data-parent'

[data-parent] { 
    @include child-attribute('-child') { 
    color: green; 
    } 
} 

ザCSS出力

[data-parent-child] { 
    color: green; 
} 

はあなたが達成したい内容に応じて、それは次のCSS

[grandparent-parent] { 
    color: white; 
} 

[grandparent-parent-child] { 
    color: blue; 
} 

希望を生成し、この

[grandparent] { 
    @include child-attribute('-parent') { 
    color: white; 
    @include child-attribute('-child') { 
     color: blue; 
    } 
    } 
} 

のようにも使用することができ、これは、これは `ので、何の解決策ではありませんあなた

Answer 2

mixinを作成して、データ属性を持つ要素のスタイルを設定できます。

SCSS：

@mixin data($name) { 
    [data-#{$name}] { 
    @content; 
    } 
} 

* { 
    @include data('lol') { 
    color: red; 
    }; 
} 

CSSの出力：

* [data-lol] { 
    color: red; 
} 

DEMO

Answer 3

私はdata属性を含むあなたの要素にclassを持つのわずかに異なるルートを下るだろう。あなたのSASSで、その後

<div class="data-obj" data-parent="true"></div>

<div class="data-obj" data-parent-child="true"></div>

.data-obj { 
    ... 

    &[data-parent] { ... } 
    &[data-parent-child] { ... } 
}