เชื่อมต่อสตริงใน Less

ฉันคิดว่านี่เป็นไปไม่ได้ แต่ฉันคิดว่าฉันถามในกรณีที่มีวิธี แนวคิดคือฉันมีตัวแปรสำหรับพา ธ ไปยังโฟลเดอร์ทรัพยากรบนเว็บ:

@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?

ใช้การแก้ไขตัวแปร :

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

รหัสเต็ม:

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

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

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

ดังที่คุณเห็นในเอกสารประกอบคุณสามารถใช้การแก้ไขสตริงร่วมกับตัวแปรและสตริงธรรมดาร่วมกันได้:

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

ฉันกำลังมองหาเคล็ดลับเดียวกันในการจัดการรูปภาพ ฉันใช้ 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");
}

สำหรับผู้สตริงเหมือนหน่วยค่าเช่น45degใน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);

ไม่ทราบว่าคุณใช้less.jsหรือ lessphp (เช่นในปลั๊กอินWP-Lessสำหรับ WordPress) แต่ด้วย lessphp คุณสามารถ "ยกเลิกการอ้างสิทธิ์" สตริงด้วย~: http://leafo.net/lessphp/docs/#string_unquoting

การใช้ Drupal 7. ฉันใช้เครื่องหมายบวกธรรมดาและใช้งานได้:

@images_path+'bg.png'