Use Less to expand variable to string

Is there a way in Less to expand the contents of a variable to a string?

My specific use case:

@thecolor: #3B98D5

.theclass {
  ...
}

.theclass:before {
  content: "#3B98D5"; // How do I use @thecolor here instead?
}

Then in HTML:

<div class="theclass">
   #3B98D5             <!-- What I want in the end -->
</div>

The use case is to create a static page that shows a set of colors, where I would like the color code in the HTML, but only ever specify it in the Less.

So in the end I want it to be a HTML text node. Is this possible at all?

Answers


Just enclose the variable within double quotes and use variable interpolation (Format: @{var-name}).

@thecolor: #3B98D5;

.theclass:before {
  content: "@{thecolor}";
}

The variable needs to be enclosed within quotes because otherwise the content property will not take it as a string and display. When you use "@theccolor", Less compiler just treats it as a normal string (and not as a variable which is present within quotes needing to be evaluated). The "@{theclass}" is the format for using variable interpolation which lets the compiler know that the value inside quotes is a variable which needs to be evaluated.

.theclass:before {
  content: "#3B98D5";
}

.theclasswrong:before {
  content: #3B98D5;
}
<div class='theclass'>- Correct Output</div>
<div class='theclasswrong'> - Will not give output without quotes</div>

Need Your Help

How to get the epoch in PL/SQL?

sql oracle

I want to insert the current time in millis ( epoch ) to a table. Is there any built in function that I can use which gives me the time in epoch?

Dynamic pages and clean URL conflicts

php .htaccess mod-rewrite

I did some looking around at how other sites might handle this and didn't really see anything that jumped out at me. I'm working on a project where you can create pages that get linked to from every