Question

The question is pretty much in the title.

I don’t know if this is possible, and can’t seem to make it work, but I might have overlooked something (Which I hope)

This is my color choosing function 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

And this is my @for

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

So my SASS has decided only to use the last if’s color, which is weird because I don’t even use 8 yet.

And yes, I have a attribute in html called color

Answer 1

SASS is just extension of CSS, so you can use HTML attributes only in selectors, like so:

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

You can not set (or get) html attributes values from within of your (S)CSS.

But in your case you can just use a set of plain CSS classes:

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

and so on, and just include them into your SASS styles.

---

In less, when using less.js, you can get access to DOM attributes via JavaScript, see “JavaScript evaluation” in the tutorial:

@height: `document.body.clientHeight`;