0

In css we have something similair for :pseudo elements. According to this, it will come in the future. At the moment its not supported by any major browser http://caniuse.com/#feat=css3-attr

.test {
    display: inline-block;
    background-color: gray;
    color: attr(data-color); /* Doens't work in css */
    width: attr(data-width px);
}

.test:after {
    content: attr(data-name);
}
<div class='test' data-name=" - CONTENT" data-color="#f00" data-width="200">test</div>

But what i want is, lets say ive the following div

<div data-color="#f00">...</div>

In LESS i want to be able to pick that color through the data attribute.

.example-class { 
    color: attr(data-color); /* Something like this */
}

Is this, or something similar, possible using LESS?

Red
  • 6,599
  • 9
  • 43
  • 85

1 Answers1

3

Considering that LESS compiles to CSS anyway, and therefore never knows about the HTML, that doesn't seem possible. That is the entire reason why the attr() function is in CSS, not LESS.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Hm, that's too bad. There is really no css alternative is there? My only option will be `js` then? – Red Jun 26 '17 at 08:51
  • @Richard Mauritz: Yeah, pretty much. Believe me, you're not the only one frustrated by this: https://stackoverflow.com/questions/8769786/css3s-attr-doesnt-work-in-major-browsers/8769922#8769922 – BoltClock Jun 26 '17 at 08:52
  • *There is really no css alternative is there?* Unless you need something more complex than just color/width the vanilla 30-years-old-HTML has what you want: `
    `.
     – seven-phases-max Jun 27 '17 at 09:30
  • The style attribute didn't appear until the late 90s, but yeah pretty much. – BoltClock Jun 27 '17 at 09:33