Create LESS variable from HTML content

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!

Why are you using HTML with LESS? LESS should be compiled to CSS... — Mandy Schoep
– Mandy Schoep, Commented Jan 16, 2014 at 20:55
I don't think this is possible. The LESS is unaware of your html, and jquery doesn't process within your LESS. Is there a reason you're not setting @width directly in the LESS? — nvioli
– nvioli, Commented Jan 16, 2014 at 20:58
@nvioli Well, it is possible if you run less.js client-side. But indeed, if one needs to set element width using jquery he just sets element width with jquery right via CSS. No reason for the LESS to be involved there at all. — seven-phases-max
– seven-phases-max, Commented Jan 16, 2014 at 21:06
Even if possible (interfacing LESS with html requires client side compiling, and so what you ask may theoretically be possible), it would be highly inadvisable. What happens if someone comes along and changes the html to Blah hahahah? Then you end up with width: Blah hahaha (i.e width: auto). — ScottS
– ScottS, Commented Jan 16, 2014 at 21:06
What I ultimately was trying to accomplish was setting this percentage once, somewhere, and reusing it everywhere. Hence, why LESS variables got involved at all, and I wanted to not use JS if possible. 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. Not using JS was more or less a design challenge for me, I could use it if I had to :P — Kaceykaso
– Kaceykaso, Commented Jan 16, 2014 at 21:37

ScottS · Accepted Answer · 2014-01-18 21:16:16Z

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.

Max Doumit · Accepted Answer · 2014-01-16 21:03:32Z

0

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.

answered Jan 16, 2014 at 21:03

Max Doumit

1,1231 gold badge12 silver badges35 bronze badges

2 Comments

Kaceykaso Over a year ago

This is fantastic, but I have to support IE unfortunately; specifically IE 8. But I might be able to work around it....maybe.

Max Doumit Over a year ago

You can use this and have a javascript workaround for the rest. do something like the following $(".bar").css("width" , $(".bar > span").html())

Collectives™ on Stack Overflow

Create LESS variable from HTML content

2 Answers 2

See Example Fiddle

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related