0

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

Mobilpadde
  • 1,871
  • 3
  • 22
  • 29

1 Answers1

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`;
neoascetic
  • 2,476
  • 25
  • 34