SASS通過其他屬性值動態創建屬性

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()作爲屬性值，即使這是實驗性的，也不會被瀏覽器廣泛支持。今天，在content屬性中使用pseudo-element這種方法是相當安全的。

所以簡短的回答是否定的，你不能。另一方面，我不明白你爲什麼試圖使用數據屬性來設置樣式，因爲目標是存儲數據，而不是確定樣式...... 另外，它們是比類更慢的選擇器。但我想這不是主題。

我會建議：

<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（以BEM時尚）：

.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; 
    }