SASSのターゲット属性値

Question

非常に論理的なので、HTMLとSASSで属性モジュールを使用します。

[data-post] { 
    font-size: 15px; 
    color: black; } 

[data-post~="title"] { 
    font-size: 20px; } 

[data-post~="title"][data-post~="feature"] { 
    font-size: 30px; } 

が正常に動作しますが、それは巣にSASSでこれらのことが可能です場合、私は思ったんだけど：SASSは次のようになります

<article data-post="wrap feature"> 
    <h1 data-post="title feature">Feature title</h1> 
</article> 

<article data-post="wrap"> 
    <h1 data-post="title">Normal title</h1> 
</article> 

：現在、私はこのようなマークアップを有することができます。それらはすべて[data-post]に適用されるので、その中の属性を対象にしたいと思います。

[data-post] { 
    font-size: 15px; 
    color: black; 

    &[~="title"] { 
    font-size: 20px; } 

    &[~="title"]&[~="feature"] { 
    font-size: 30px; } 
} 

これは、コードをよりDRYと簡単に、より論理的だろう/維持：私は（明らかに動作しません）このようなものを想像しています。

Answer 1

これは近いです。そのたびに、子セレクタの属性名を再入力する必要があります。クラスとIDはtacking on an ending to the parent classで取り除かれますが、同じアイデアを属性に拡張すると、2番目のセレクタは[data-post][~="title"]になります。

だから：そこにあなたを取得する必要があります

[data-post] { 
    font-size: 10px; 

    &[data-post~="title"] { 
    font-size: 50px; 
    color: blue; 
    } 
} 

。 http://jsbin.com/kazusamore/edit?html,css,js,output