CODEWITHSUNDEEP
cssless
muudless
muudless

Reputation: 7532

How to use LESS with html attributes?

I have a lot of progress bars which I am currently using inline style to set the width. Is there a way for me to utilise data type with LESS or just CSS?

For example:

<div class="progress" aria-valuenow="3"></div>
<div class="progress" aria-valuenow="50"></div>

Can I do something like this in LESS/CSS:

.progress[aria-valuenow=x] {
    width: x%;
}

Upvotes: 0

Views: 1073

Answers (1)

DMTintner
DMTintner

Reputation: 14729

impossible to map a variable attribute value in css. can be done in less using a for loop but the output css would just be a ton of css for every possible value. my suggestion- if youre already applying the value inline using js, just apply that value to a style selector like width or translateX() and style youre progress bars accordingly

<div class="progress" width="x"></div>

 .progress {
    background: blue;
    transition: width 300ms;
}

Upvotes: 3

Related Questions