String gabungan dalam Less

129

Saya pikir ini tidak mungkin, tapi saya pikir saya bertanya kalau-kalau ada cara. Idenya adalah bahwa saya memiliki variabel untuk path ke folder sumber daya web:

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

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

Saya mendapatkan ini sebagai hasilnya:

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

Tapi, saya ingin string digabungkan menjadi satu string seperti ini:

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

Apakah mungkin untuk menggabungkan string bersama di Less?

— Juminoz
sumber

225

Gunakan Interpolasi Variabel :

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

Kode lengkap:

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

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

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

— Paul
sumber

Terima kasih atas jawabannya! Ini sempurna. Sekarang saya dapat memastikan bahwa bahkan jika jalur konteks berubah, tidak akan ada mimpi buruk refactoring.

— juminoz

Terima kasih, saya baru saja menemukan masalah yang sama dan melewatkannya di dokumen.

— David

Terima kasih @Paulpro! Saya mengalami masalah dengan add-on VS Web Compiler, di mana itu mengubah url gambar latar belakang saya, dan saya tidak terlalu yakin bagaimana melakukan penggabungan :)

— hatsrumandcode

6

Hanya sebuah catatan untuk orang-orang yang mungkin mendapatkan jawaban ini tetapi mencoba menggunakannya misalnya untuk menggabungkan variabel numerik dengan string seperti pxatau %: Anda dapat membatalkan tanda kutip string dengan pra- ~width: ~"@{w}px";

— pendingnya

29

Seperti yang Anda lihat dalam dokumentasi , Anda dapat menggunakan interpolasi string juga dengan string variabel dan polos bersama-sama:

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

— Stephan Hoyer
sumber

12

Saya mencari trik yang sama untuk menangani gambar. Saya menggunakan mixin untuk menjawab ini:

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

Maka Anda dapat menggunakan:

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

atau

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

— pengguna2725509
sumber

Halo dan selamat datang! menurut Anda mengapa jawaban yang diterima tidak lagi valid? apakah sudah usang? apakah ada peningkatan teknologi? Itu salah? mengapa milikmu lebih baik?

— STT LCU

9

Untuk nilai-nilai unit seperti string seperti 45degdalam transform: rotate(45deg)menggunakan unit(value, suffix)fungsi. Contoh:

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

— jordanb
sumber

1

Secara teknis tidak menjawab pertanyaan, tetapi tetap merupakan trik yang bermanfaat.

— trysis

7

Tidak tahu apakah Anda menggunakan less.js atau lessphp (seperti pada plugin WP-Less untuk WordPress) tetapi dengan lessphp Anda dapat "membatalkan tanda kutip" string dengan ~: http://leafo.net/lessphp/docs/#string_unquoting

— FelipeAls
sumber

1

Ini bekerja dengan KURANG reguler, juga. Saya tidak tahu apakah itu pada 2012 ketika jawaban ini ditulis.

— trysis

-7

Menggunakan Drupal 7. Saya telah menggunakan tanda plus biasa dan berfungsi:

@images_path+'bg.png'

— Gaba
sumber

5

Kecuali dia mau belajar Drupal hanya untuk string untuk menggunakannya dalam KURANG / CSS, saya pikir saran Anda tidak berharga. Jangan tersinggung, saya hanya mengatakan.

— ozanmuyes