css - 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

Sass 无法知道关于您的 dom 的任何信息。 Sass 是一个预处理器，这意味着它生成纯 CSS，它不是动态语言。

这意味着 sass 无法计算出数据属性的值。只有 CSS 可以。

在 CSS 中，我认为你只能使用 attr() 作为属性值，即使这是实验性的，也不会被浏览器广泛支持。今天，在 伪元素 的 content 属性中使用它是非常安全的。

所以简短的回答是否定的，你不能。

另一方面，我不明白你为什么要尝试使用数据属性来设置元素的样式，因为目标是存储数据，而不是确定样式…… 此外，它们是比类更慢的选择器。但我想这不是主题。

我会推荐:

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