title: Is it possible to use html attributes in sass if?
body: <p>The question is pretty much in the title.</p>
  
  <p>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)</p>
  
  <p>This is my color choosing function mixin thingie</p>
  
  <pre><code>=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
  </code></pre>
  
  <p>And this is my <code>@for</code></p>
  
  <pre><code>@for $i from 1 through 143
    li:nth-child(#{$i})
      float: left
      width: 50px
      height: 50px
      $color: #{attr(color)}
      +colors($color)
  </code></pre>
  
  <p>So my SASS has decided only to use the last if's color, which is weird because I don't even use 8 yet.</p>
  
  <p>And yes, I have a attribute in html called <code>color</code></p>