Chuỗi liên kết trong Ít

Tôi nghĩ rằng điều này là không thể, nhưng tôi nghĩ tôi hỏi trong trường hợp có một cách. Ý tưởng là tôi có một biến cho đường dẫn đến thư mục tài nguyên web:

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

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

Tôi nhận được điều này là kết quả:

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

Nhưng, tôi muốn các chuỗi kết hợp thành một chuỗi như thế này:

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

Có thể nối các chuỗi với nhau trong Ít hơn không?

Sử dụng phép nội suy biến :

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

Mã đầy đủ:

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

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

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

Như bạn có thể thấy trong tài liệu , bạn cũng có thể sử dụng phép nội suy chuỗi với các chuỗi biến và đơn giản cùng nhau:

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

Tôi đã tìm kiếm cùng một mẹo để xử lý hình ảnh. Tôi đã sử dụng một mixin để trả lời điều này:

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

Sau đó, bạn có thể sử dụng:

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

hoặc là

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

Đối với những giá trị đơn vị giống như chuỗi như 45degtrong transform: rotate(45deg)sử dụng unit(value, suffix)hàm. Thí dụ:

// 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);

Không biết bạn đang sử dụng less.js hay lessphp (như trong plugin WP-Less cho WordPress) nhưng với lessphp, bạn có thể "bỏ qua" các chuỗi với ~: http://leafo.net/lessphp/docs/#opes_unquote

Sử dụng Drupal 7. Tôi đã sử dụng dấu cộng thông thường và nó hoạt động:

@images_path+'bg.png'