CODEWITHSUNDEEP
sass
Enzo
Enzo

Reputation: 318

Get data attr in scss

I want to get data attr which is a number from HTML in my scss file and do a for loop on elements.

so here's what i did :

HTML :

 <figure class="inner" data-attr="8"></figure>

SCSS

[data-attr] {
  $no: attr('data-attr') !global;
}

and 

@for $i from 0 through $no {
      &:nth-of-type(#{$i}) {
        left: $no;
      }
    }

but I got an error :

Error: attr("data-attr") is not an integer.$no: attr('data-attr') !global

Upvotes: 1

Views: 1480

Answers (1)

Nathan Dawson
Nathan Dawson

Reputation: 19318

You'll need to take a different approach.

SASS is a pre-processor that compiles into a CSS file. You can't use a SASS loop to generate CSS output based on a value that you don't have at the time of compilation.

Without knowing what you're actually attempting to do, it's not possible to suggest an alternative solution either.

Upvotes: 2

Related Questions