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

Question

Tôi nghĩ rằng điều này là không thể, nhưng tôi nghĩ rằng tôi yêu cầu 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 có được điều này kết quả là:

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

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

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

Có thể ghép các chuỗi lại với nhau trong Ít hơn không?

Answer 1

Sử dụng Variable Interpolation:

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

Toàn mã:

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

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

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

Answer 2

Không biết nếu bạn đang sử dụng less.js hoặc lessphp (như trong WP-Less plugin cho WordPress) nhưng với lessphp bạn có thể " unquote "strings with ~: http://leafo.net/lessphp/docs/#string_unquoting

Answer 3

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' 

Answer 4

Tôi đang 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 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

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

Answer 5

Như bạn có thể nhìn thấy trong documentation, bạn có thể sử dụng chuỗi suy cũng với các chuỗi biến và đồng đều với nhau:

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

Answer 6

Đối với các giá trị đơn vị giống như chuỗi như 45deg trong transform: rotate(45deg), hãy sử dụng chức năng unit(value, suffix). Ví 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);