Create LESS variable from HTML content - html

Question

I wasn't able to find a thread on this, but if there is one, please let me know!
I want to create and use LESS variables based on the HTML content in a certain tag.
For example, the HTML would be something like:
<div class="bar">
<span>80%</span>
Blah blah
</div>
And the CSS/LESS would be something like:
#width: '$(".bar > span").text()';
.bar { background: red; width: #width; }
Do I need to convert the variable from a string to an int or float in order for it to be used as such? And if so, how?
Thanks!

Answer 1

I'm not sure if your comment above was mistyped,
"At first, I was trying to to just use a LESS variable for the sizing,
and then set it as the HTML content using the CSS content tag, but it
was working."
You state "but" after which I expected "it was [not] working" (otherwise, I would have expected you to say "and"). That was actually a solution I thought of, but if I am correct, and it was not working for you, then my guess is you were using content incorrectly (directly on the span itself?). The content property is only valid on the ::before and ::after pseudo elements.
So this works like you originally intended (and no need for the span element at all):
LESS
#width: 80%;
.bar {
background: red;
width: #width;
}
.bar:before {
content: '#{width}';
}
CSS Output
.bar {
background: red;
width: 80%;
}
.bar:before {
content: '80%';
}
See Example Fiddle
This will work fine for IE8 (you note supporting that in another comment). Assuming the 80% is not a necessary "content" value (that you want search engines picking up because it is critical data on the page), then using a pseudo element is perfectly fine for such visual user feedback. If you desire, it can be aligned just as regular text and some padding added to space it from the surrounding text, just like it were a span element.

Answer 2

As said in the comment i doubt less can do this.
Although you might want to use the meter HTML5 tag like so
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
Here is an example
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_meter
I think this is what you wanted to achieve from your script.