LEBIH KURANG - Menggunakan Lebih Sedikit Di Browser

Less digunakan di browser saat Anda ingin mengompilasi file Less secara dinamis saat diperlukan dan bukan di sisi server; ini karena kurang adalah file javascript yang besar.

Untuk memulainya, kita perlu menambahkan skrip LESS untuk menggunakan LESS di browser -

<script src = "less.js"></script>

Untuk menemukan tag gaya di halaman, kita perlu menambahkan baris berikut di halaman. Itu juga membuat tag gaya dengan css yang dikompilasi.

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

Opsi Pengaturan

Sebelum tag skrip, opsi dapat disetel pada objek yang lebih sedikit secara terprogram. Ini akan mempengaruhi semua penggunaan terprogram less dan tag tautan awal.

Misalnya, kita dapat mengatur opsi sebagai berikut -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

Kami juga dapat mengatur opsi dalam format lain pada tag skrip seperti yang ditentukan di bawah ini -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

Anda juga dapat menambahkan opsi ini ke tag tautan.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

Poin yang perlu dipertimbangkan untuk opsi atribut adalah -

window.less <script tag <tag link adalah tingkat kepentingan.
Atribut data tidak dapat ditulis dalam kasus unta; opsi tag tautan direpresentasikan sebagai opsi waktu.
Atribut data dengan nilai non-string harus valid JSON.

Mode Tontonan

Mode jam tangan dapat diaktifkan dengan menyetel opsi env ke pengembangan dan memanggil less.watch () setelah file less.js ditambahkan. Jika Anda ingin mode jam diaktifkan untuk sementara, tambahkan #! Watch ke URL.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

Ubah Variabel

Modifikasi run time variabel LESS diaktifkan. File LESS dikompilasi ulang ketika nilai baru dipanggil. Kode berikut menunjukkan penggunaan dasar variabel modifikasi -

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

Debugging

Kita dapat menambahkan opsi ! DumpLineNumbers: mediaquery ke opsi url atau dumpLineNumbers seperti yang disebutkan di atas. The mediaquery pilihan dapat digunakan dengan tanpa api (Ini menampilkan asli KURANG nama file dan nomor baris gaya CSS KURANG dihasilkan.)

Pilihan

Sebelum memuat file skrip less.js, opsi harus disetel di objek less global .

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

async- Ini adalah tipe Boolean. File yang diimpor akan diminta apakah dengan opsi async atau tidak. Secara default, ini salah.
dumpLineNumbers- Ini adalah tipe string. Dalam file css keluaran, informasi baris sumber ditambahkan saat dumpLineNumbers diatur. Ini membantu dalam men-debug aturan tertentu berasal.
env- Ini adalah tipe string. Env dapat berjalan dalam pengembangan atau produksi. Pengembangan diatur secara otomatis ketika URL dokumen dimulai denganfile:// atau ada di mesin lokal Anda.
errorReporting - Jika kompilasi gagal, metode pelaporan kesalahan dapat diatur.
fileAsync- Ini adalah tipe Boolean. Ketika sebuah halaman hadir dengan protokol file maka ia dapat meminta apakah akan mengimpor secara asinkron atau tidak.
functions - Ini adalah tipe objek.
logLevel- Ini adalah tipe angka. Ini menampilkan tingkat logging di konsol javascript.
- 2: Informasi dan kesalahan
- 1: Kesalahan
- 0: Tidak ada
poll- Dalam mode jam, waktu ditampilkan dalam milidetik di antara polling. Ini adalah tipe integer; secara default, ini diatur ke 1000.
relativeUrls- URL menyesuaikan agar relatif; secara default, opsi ini disetel sebagai false. Ini berarti bahwa URL sudah relatif terhadap file tanpa entri. Ini adalah tipe Boolean.
globalVars- Menyisipkan daftar variabel global ke dalam kode. Variabel tipe string harus dimasukkan dalam tanda kutip
modifyVars- Ini tidak seperti opsi variabel global. Ini memindahkan deklarasi di akhir file less Anda.
rootpath - Ini menetapkan jalur di awal setiap sumber daya URL.
useFileCache- Menggunakan cache file per sesi. Cache dalam file yang lebih sedikit digunakan untuk memanggil modifikator di mana semua file yang lebih sedikit tidak akan diambil lagi.