كيف أدمج نصوص على Less؟

Simoh · 18 نوفمبر 2015

أبرمج على تقنية 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"); }

ويبدو أن الخطأ في طريقة الدمج، فكيف أفعل ذلك بشكل صحيح؟

E.Nourddine · 19 نوفمبر 2015

المشكل في الكود المُدرج في سؤالك، هو كيفية دمج المتغيرين، وكتصحيح للخطأ إليك الطريقة الصحيحة:

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

ليكون الكود كاملا بالطريقة التالية:

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

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

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

مثال آخر للتوضيح أكثر:

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

لينتج بعد عملية Compilation الكود التالي:

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

السؤال