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?

css path web less concat 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

String gabungan dalam Less

Jawaban: