KURANG - Plugin

Dalam bab ini, kita akan memahami bagaimana sebuah Plugin dapat diunggah untuk memperluas fungsionalitas situs. Plugin dapat digunakan untuk mempermudah pekerjaan Anda.

Garis komando

Untuk menginstal plugin menggunakan baris perintah, Anda harus menginstal plugin lessc terlebih dahulu. Plugin dapat diinstal menggunakan lebih sedikit plugin di awal. Baris perintah berikut akan membantu Anda menginstal plugin clean-css -

npm install less-plugin-clean-css

Secara langsung, Anda dapat menggunakan plugin yang diinstal dengan menggunakan perintah berikut -

lessc --plugin = path_to_plugin = options

Menggunakan Plugin dalam Kode

Di Node, plugin diperlukan dan diteruskan dalam array sebagai plugin opsi ke less.

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

Di Browser

Sebelum skrip less.js, pembuat plugin harus menyertakan file javascript di halaman.

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

<script>
less = {
   plugins: [plugin]
};
</script>

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

Daftar Less Plugins

Tabel berikut mencantumkan plugin yang tersedia di LESS.

Plugin Postprocessor / Fitur

Sr.No.	Plugin & Deskripsi
1	Perbaikan otomatis Ini digunakan untuk menambahkan prefiks ke CSS setelah terjemahan dari LESS.
2	CSScomb Ini membantu meningkatkan pemeliharaan lembar gaya Anda.
3	clean-css Ini meminimalkan output CSS dari LESS.
4	CSSWring Ini mengompresi atau memperkecil output CSS dari LESS.
5	css-flip Ini digunakan untuk menghasilkan CSS dari kiri-ke-kanan (LTR) atau kanan-ke-kiri (RTL).
6	fungsi Ini menulis fungsi LESS dalam LESS itu sendiri.
7	gumpal Ini digunakan untuk mengimpor banyak file.
8	grup-css-media-queries Itu melakukan pasca-pemrosesan untuk Less.
9	inline-url Secara otomatis mengubah URL menjadi data uri.
10	npm-import Itu mengimpor dari paket npm dengan harga lebih murah.
11	menyenangkan Ini digunakan untuk postprocess Less.
12	rtl LESS dibalik dari ltr (kiri-ke-kanan) ke rtl (kanan-ke-kiri).

Pengimpor Kerangka / Perpustakaan

Sr.No.	Importir & Deskripsi
1	Bootstrap Kode Bootstrap LESS diimpor sebelum kode LESS kustom.
2	Bower Resolve File LESS diimpor dari paket Bower.
3	CSS utama untuk less.js Sebelum kode LESS kustom, kode LESS untuk Cardinal diimpor.
4	Flexbox Grid Kerangka yang paling sering diimpor atau importir perpustakaan.
5	Sistem Grid Fleksibel Ini mengimpor Sistem Grid Fleksibel.
6	Ionik Ini mengimpor kerangka ionik.
7	Lesshat Ini mengimpor mixin Lesshat.
8	Kerangka Ini mengimpor kode kerangka lebih sedikit.

Perpustakaan Fungsi

Sr.No.	Importir & Deskripsi
1	fungsi warna tingkat lanjut Ini digunakan untuk menemukan warna yang lebih kontras.
2	cubehelix.dll Menggunakan nilai koreksi gamma 1, fungsi cubehelix dapat mengembalikan warna antara dua warna.
3	daftar Ini daftar pustaka fungsi manipulasi.

Untuk Penulis Plugin

LESS memungkinkan penulis untuk menggabungkan dengan lebih sedikit.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

pluginManager menyediakan pemegang yang dapat menambahkan pengelola file, pemroses pos, atau pengunjung.
setOptions fungsi melewati string.
printUsage fungsi digunakan untuk menjelaskan opsi.