Get data attr in scss

Question

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

That's not possible, scss is compiled to css and is never near the browser — anderssonola, Aug 06 '19 at 14:18

score 1 · Accepted Answer · answered Aug 06 '19 at 16:26

1

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.

answered Aug 06 '19 at 16:26

Nathan Dawson

18,138
3
52
58

Thanks a lot https://stackoverflow.com/questions/49738487/scss-for-loop-get-the-length-from-data-attribute This is not true then, right ? – Enzo Aug 07 '19 at 18:20
I'm remarkably surprised the answer you linked to was accepted. It's plainly false. SASS has no knowledge whatsoever of your HTML elements when it compiles. I can't understand a scenario in which that works. – Nathan Dawson Aug 07 '19 at 20:53

Get data attr in scss

1 Answers1