0

这个问题几乎在标题中。

我不知道这是否可能，并且似乎无法使其发挥作用，但我可能忽略了一些事情（我希望）

这是我的颜色选择功能 mixin thingie

=colors($color)
  @if #{$color} == 0
    background: transparent
  @if #{$color} == 1
    background: #87dcec
  @if #{$color} == 2
    background: #72d856
  @if #{$color} == 3
    background: #f7e818
  @if #{$color} == 4
    background: #f75149
  @if #{$color} == 5
    background: #303030
  @if #{$color} == 6
    background: #fff1da
  @if #{$color} == 7
    background: #75430a
  @if #{$color} == 8
    background: #0e7259

这是我的@for

@for $i from 1 through 143
  li:nth-child(#{$i})
    float: left
    width: 50px
    height: 50px
    $color: #{attr(color)}
    +colors($color)

所以我的 SASS 决定只使用最后一个 if 的颜色，这很奇怪，因为我什至还没有使用 8。

是的，我在 html 中有一个名为color

4

1 回答 1

1

SASS 只是 CSS 的扩展，因此您只能在选择器中使用 HTML 属性，如下所示：

.some[color] { color: $color; }  // $color is SCSS variable
.some[color=red] { color: red; }

您不能从 (S)CSS 中设置（或获取）html 属性值。

但是在您的情况下，您可以只使用一组纯 CSS 类：

.class[color=0] { background: transparent; }
.class[color=1] { background: #87dcec; }

等等，只需将它们包含在您的 SASS 样式中即可。

在less中，使用时less.js，可以通过 JavaScript 访问 DOM 属性，参见教程中的“JavaScript 评估”：

@height: `document.body.clientHeight`;
于 2012-08-06T00:03:28.213 回答