Question

问题几乎在标题中。

我不知道这是否可行，似乎无法使其发挥作用，但我可能忽视了某些事情（我希望如此）

这是我的颜色选择功能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

的属性

Answer 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`;

如果可以在sass中使用html属性吗？

1 个答案: