Question

我认为这是不可能的，但我想如果有办法，我会问。我的想法是我有一个变量用于web资源文件夹的路径：

@root: "../img/";
@file: "test.css";
@url: @root@file;

.px {
    background-image: url(@url);
}

我得到了这个结果：

.px { background-image: url("../img/" "test.css"); }

但是，我希望字符串组合成一个字符串，如下所示：

.px { background-image: url("../img/test.css"); }

是否可以在Less？

中将字符串连接在一起

Answer 1

使用Variable Interpolation：

@url: "@{root}@{file}";

完整代码：

@root: "../img/";
@file: "test.css";

@url: "@{root}@{file}";

.px{ background-image: url(@url); }

Answer 2

正如您在documentation中所看到的，您可以将字符串插值与变量和纯字符串一起使用：

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

Answer 3

我正在寻找处理图像的相同技巧。我用mixin来回答这个问题：

.bg-img(@img-name,@color:"black"){
    @base-path:~"./images/@{color}/";
    background-image: url("@{base-path}@{img-name}");
}

然后你可以使用：

.px{
    .bg-img("dot.png");
}

或

.px{
    .bg-img("dot.png","red");
}

Answer 4

对于transform: rotate(45deg)中unit(value, suffix)之类的类似字符串的单位值，请使用// Mixin .rotate(@deg) { @rotation: unit(@deg, deg); -ms-transform: rotate(@rotation); transform: rotate(@rotation); } // Usage .rotate(45); // Output -ms-transform: rotate(45deg); transform: rotate(45deg);函数。示例：

type EnterHook = (nextState: RouterState, replaceState: RedirectFunction, callback?: Function) => any;

type RedirectFunction = (state: ?LocationState, pathname: Pathname | Path, query: ?Query) => void;

Answer 5

不知道你是使用less.js还是lessphp（比如在WordPress的WP-Less插件中）但是使用lessphp你可以使用~“取消引用”字符串：{{3 }}

Answer 6

使用Drupal 7.我使用普通加号并且它正在工作：

@images_path+'bg.png'

在Less中连接字符串

6 个答案: