他の属性値で属性を動的に作成する

Question

他の属性の値に応じて属性を作成したいとします。

例えば、我々が持っているのでdata-active-navは、動的に設定されます。

HTML：

<div data-active-nav="user"> 
    <div data-nav="user"></div> 
    <div data-nav="admin"></div> 
</div> 

を今、私は、内側のdivの依存属性上のスタイルを設定したいが、私はしたくありませんそれぞれのスタイルを書く。

私はこのような何かをしたい：

[data-nav=#{attr(data-active-nav)}] { 
    color: black; 
} 

しかし、これの出力は

[data-nav='attr(data-active-nav)'] 

になりますが、これを行う方法は

[data-active-nav=user] { 
    [data-nav=user] { 
     color: black; 
    } 
} 

[data-active-nav=admin] { 
    [data-nav=admin] { 
     color: black; 
    } 
} 

Answer 1

サスが持って記述することなく、ありますあなたのdomについて何かを知る方法はありません。 Sassはプリプロセッサです。つまり、純粋なCSSを生成します。動的言語ではありません。

これは、sassがデータ属性の値を把握できないことを意味します。 CSSだけができます。

CSSでは、プロパティ値としてattr()しか使用できないと考えています。これは実験的なものでもあり、ブラウザで広くサポートされていません。今日ではpseudo-elementのcontentプロパティでそれを使用するのはかなり安全です。

ですから、短い答えはいいえ、できません。

一方、データ属性を使用してスタイルを設定しようとしている理由はわかりません。なぜなら、データを格納し、スタイルを決定するのが目的ではないからです... また、クラスよりもセレクタが低速です。私はそれが主題ではないと思う。

私が推薦する：（BEM方式で）

<nav class="nav is-user-active"> 
    <div class="nav__item nav__item--user">user</div> 
    <div class="nav__item nav__item--other">other</div> 
</nav> 

SASS：

.nav__item { 
    color: blue; 

    .is-user-active &--user, 
    .is-other-active &--other { 
     color: black; 
    } 
} 

これはにコンパイルします：

.nav__item { 
    color: blue; 
} 

.is-user-active .nav__item--user, 
.is-other-active .nav__item--other { 
    color: black; 
} 

けどをあなたが本当にdata-attrを使用したい場合は、同じパターンを折り畳むことができます：

[data-nav-active="user"] [nav-item="user"], 
    [data-nav-active="other"] [nav-item="other"] { 
     color: black; 
    }