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 pseudo-element属性中使用它是非常安全的。

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

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

我建议：

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

SASS通过其他属性值

1 个答案: