在LESS中使用函数里面的字符串 [英] Use function inside string with LESS

问题描述

我搜索了文档和SO，但找不到我的查询答案。在LESS的字符串中包含函数的结果的正确方法是什么？

例如，我定义了一个变量，并希望减轻它箱子阴影。例如，这里是我想做的：

  .box-shadow（〜inset 0 1px 1px rgba 0,0，.075），0 0 2px lighten（@green，10％））; 
  

显然不行。没有为 lighten（@green，10％）？

定义一个特定变量，正确的方法是什么？

  @green ：＃0f0; 
 .box-shadow（@def）{box-shadow：@def; } 
 
p {
 .box-shadow（〜inset 0 1px 1px rgba（0,0,0，.075），0 0 2pxlighten（@green，10％）） 
} 
  

编译为

  p {
 box-shadow：inset 0 1px 1px rgba（0,0,0，.075），0 0 2px＃33ff33; 
} 
  

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%)?

解决方案

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;
}

这篇关于在LESS中使用函数里面的字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！