Use function inside string with LESS

问题:

I searched both the docs and SO but could not find the answer to my query. What is the correct way to include the result of a function inside a string with LESS?

For example, I have defined a variable, and would like to lighten it for a box-shadow. For example, here's what I would like to do:

.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px lighten(@green, 10%)");

Obviously that doesn't work. What is the correct way to achieve this, without defining a specific variable for lighten(@green, 10%)?

回答1:

It should work to just put it outside of the string.

@green: #0f0;
.box-shadow(@def) { box-shadow: @def; }

p {
  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px" lighten(@green, 10%)) 
}

Compiles to

p {
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px #33ff33;
}