LESS adalah pra-prosesor CSS yang memungkinkan lembar gaya yang dapat disesuaikan, dikelola, dan dapat digunakan kembali untuk situs web. LESS adalah bahasa lembar gaya dinamis yang memperluas kemampuan CSS. LESS juga ramah lintas browser.
CSS Preprocessor adalah bahasa skrip yang memperluas CSS dan dikompilasi menjadi sintaks CSS biasa, sehingga dapat dibaca oleh browser web Anda. Ini menyediakan fungsionalitas seperti variabel , fungsi , mixin , dan operasi yang memungkinkan Anda membuat CSS dinamis.
Mengapa KURANG?
Sekarang mari kita mengerti mengapa kita menggunakan LESS.
LESS mendukung pembuatan CSS yang lebih bersih dan ramah lintas-browser dengan lebih cepat dan mudah.
LESS dirancang dalam JavaScript dan juga dibuat untuk digunakan secara langsung , yang mengkompilasi lebih cepat dari pra-prosesor CSS lainnya.
LESS menyimpan kode Anda secara modular yang sangat penting dengan membuatnya dapat dibaca dan diubah dengan mudah.
Pemeliharaan yang lebih cepat dapat dicapai dengan menggunakan variabel LESS .
Sejarah
LESS dirancang oleh Alexis Sellierpada tahun 2009. LESS adalah open-source. Versi pertama LESS ditulis di Ruby; di versi yang lebih baru, penggunaan Ruby digantikan oleh JavaScript.
fitur
Kode yang lebih bersih dan lebih mudah dibaca dapat ditulis dengan cara yang terorganisir.
Kita dapat menentukan gaya dan dapat digunakan kembali di seluruh kode.
LESS didasarkan pada JavaScript dan merupakan kumpulan CSS yang super.
LESS adalah alat tangkas yang menyelesaikan masalah redundansi kode.
Keuntungan
LESS dengan mudah menghasilkan CSS yang berfungsi di semua browser.
LESS memungkinkan Anda untuk menulis kode yang lebih baik dan terorganisir dengan baik dengan menggunakan nesting .
Pemeliharaan dapat dicapai lebih cepat dengan menggunakan variabel .
LESS memungkinkan Anda untuk menggunakan kembali seluruh kelas secara mudah dengan mereferensikannya di kumpulan aturan Anda.
LESS menyediakan penggunaan operasi yang membuat pengkodean lebih cepat dan menghemat waktu.
Kekurangan
Perlu waktu untuk mempelajari apakah Anda baru mengenal praproses CSS.
Karena kopling yang erat antara modul, lebih banyak upaya harus dilakukan untuk menggunakan kembali dan / atau menguji modul yang bergantung.
LESS memiliki framework yang lebih sedikit dibandingkan dengan preprocessor lama seperti SASS, yang terdiri dari framework Compass , Gravity dan Susy .
Dalam bab ini, kita akan memahami, selangkah demi selangkah, cara menginstal LESS.
Persyaratan Sistem untuk LESS
Operating System - Lintas platform
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.
Pemasangan LESS
Mari kita sekarang memahami penginstalan LESS.
Step 1 - Kami membutuhkan NodeJsuntuk menjalankan contoh KURANG. Untuk mengunduh NodeJs, buka tautannyahttps://nodejs.org/en/, Anda akan melihat layar seperti di bawah ini -
Unduh file zip versi Fitur Terbaru .
Step 2- Jalankan pengaturan untuk menginstal Node.js di sistem Anda.
Step 3- Selanjutnya, Instal LESS di server melalui NPM (Node Package Manager). Jalankan perintah berikut di prompt perintah.
npm install -g less
Step 4 - Setelah instalasi LESS berhasil, Anda akan melihat baris berikut pada command prompt -
Sekarang mari kita buat file style.less yang sangat mirip dengan CSS, satu-satunya perbedaan adalah file ini akan disimpan dengan ekstensi .less . Baik file .html dan .less harus dibuat di dalam foldernodejs.
Kompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Ketika Anda menjalankan perintah di atas, itu akan membuat file style.css secara otomatis. Setiap kali Anda mengubah file LESS, Anda perlu menjalankan perintah di atas dicmddan kemudian file style.css akan diperbarui.
File style.css akan memiliki kode berikut ketika Anda menjalankan perintah di atas -
style.css
h1 {
color: #FF7F50;
}
h3 {
color: #800080;
}
Keluaran
Sekarang mari kita lakukan langkah-langkah berikut untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file hello.htm mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Deskripsi
Ini adalah sekelompok properti CSS yang memungkinkan penggunaan properti dari satu kelas ke kelas lain dan menyertakan nama kelas sebagai propertinya. Di LESS, Anda dapat mendeklarasikan mixin dengan cara yang sama seperti gaya CSS menggunakan pemilih kelas atau id. Itu dapat menyimpan banyak nilai dan dapat digunakan kembali dalam kode kapan pun diperlukan.
Contoh
Contoh berikut menunjukkan penggunaan aturan bersarang dalam file LESS -
<html>
<head>
<title>Nested Rules</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "container">
<h1>First Heading</h1>
<p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<div class = "myclass">
<h1>Second Heading</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</div>
</body>
</html>
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file nested_rules.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Deskripsi
Anda dapat menyarangkan arahan seperti media dan bingkai utama dengan cara yang sama, seperti cara Anda menyarangkan pemilih. Anda dapat menempatkan direktif di atas dan elemen relatifnya tidak akan diubah di dalam kumpulan aturannya. Ini dikenal sebagai proses penggelembungan.
Contoh
Contoh berikut menunjukkan penggunaan arahan bersarang dan menggelembung di file LESS -
<html>
<head>
<title>Nested Directives</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Nested Directives</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file nested_directives_bubbling.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Deskripsi
LESS menyediakan dukungan untuk beberapa operasi aritmatika seperti plus (+), minus (-), perkalian (*) dan pembagian (/) dan mereka dapat beroperasi pada bilangan, warna atau variabel apa pun. Operasi menghemat banyak waktu saat Anda menggunakan variabel dan Anda ingin mengerjakan matematika sederhana.
Contoh
Contoh berikut menunjukkan penggunaan operasi di file LESS -
<html>
<head>
<title>Less Operations</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Operations</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -
style.css
.myclass {
font-size: 20px;
color: green;
}
Keluaran
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file operations.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Deskripsi
Ini membangun pemilih secara dinamis dan menggunakan properti atau nilai variabel sebagai string arbitrer.
Contoh
Contoh berikut menunjukkan penggunaan pelolosan di file LESS -
<html>
<head>
<title>Less Escaping</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Escaping</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>
Sekarang buat file style.less .
style.less
p {
color: ~"green";
}
Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Jalankan perintah di atas, itu akan membuat file style.css secara otomatis dengan kode berikut -
style.css
p {
color: green;
}
Apa pun yang tertulis di dalam ~ "some_text" akan ditampilkan sebagai some_text setelah mengkompilasi kode LESS ke kode CSS.
Keluaran
Sekarang mari kita lakukan langkah-langkah berikut untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file escaping.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Deskripsi
LESS memetakan kode JavaScript dengan manipulasi nilai dan menggunakan fungsi yang telah ditentukan untuk memanipulasi aspek elemen HTML di style sheet. Ini menyediakan beberapa fungsi untuk memanipulasi warna seperti fungsi bulat, fungsi lantai, fungsi langit-langit, fungsi persentase dll.
Contoh
Contoh berikut menunjukkan penggunaan fungsi dalam file LESS -
<html>
<head>
<title>Less Functions</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Functions</h1>
<p class = "mycolor">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Sekarang jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -
style.css
.mycolor {
color: #FF8000;
width: 100%;
}
Keluaran
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file functions.html mengajukan.
Buka file HTML ini di browser, ditampilkan Anda akan menerima output berikut.
Deskripsi
Namespaces digunakan untuk mengelompokkan mixin di bawah nama umum. Dengan menggunakan ruang nama, Anda dapat menghindari konflik dalam nama dan merangkum sekelompok mixin dari luar.
Contoh
Contoh berikut menunjukkan penggunaan ruang nama dan pengakses di file LESS -
<html>
<head>
<title>Less Namespaces and Accessors</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Namespaces and Accessors</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -
style.css
.myclass {
font-size: 20px;
color: green;
}
Keluaran
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file namespaces_accessors.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Deskripsi
Cakupan variabel menentukan tempat variabel yang tersedia. Variabel akan dicari dari lingkup lokal dan jika tidak tersedia, maka compiler akan mencari dari lingkup induk.
Contoh
Contoh berikut menunjukkan penggunaan ruang nama dan pengakses di file LESS -
<html>
<head>
<title>Less Scope</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Scope</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -
style.css
.myclass {
font-size: 20px;
color: green;
}
Keluaran
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file scope.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Deskripsi
Komentar membuat kode menjadi jelas dan dapat dimengerti oleh pengguna. Anda dapat menggunakan gaya blok dan komentar sebaris dalam kode, tetapi ketika Anda mengompilasi kode LESS, komentar baris tunggal tidak akan muncul di file CSS.
Contoh
Contoh berikut menunjukkan penggunaan komentar di file LESS -
<html>
<head>
<title>Less Comments</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Comments</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
</body>
</html>
Sekarang buat file style.less .
style.less
/* It displays the
green color! */
.myclass {
color: green;
}
// It displays the blue color
.myclass1 {
color: red;
}
Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Sekarang jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -
style.css
/* It displays the
green color! */
.myclass {
color: green;
}
.myclass1 {
color: red;
}
Keluaran
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file comments.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Deskripsi
Ini digunakan untuk mengimpor konten file LESS atau CSS.
Contoh
Contoh berikut menunjukkan penggunaan mengimpor dalam file LESS -
<html>
<head>
<title>Less Importing</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Importing</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
<p class = "myclass2">LESS supports creating cleaner,
cross-browser friendly CSS faster and easier.</p>
</body>
</html>
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file importing.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Pada bab ini, kita akan membahas Variabel di LESS. LESS memungkinkan variabel untuk didefinisikan dengan simbol @. The Variabel tugas dilakukan dengancolon(:).
Tabel berikut menunjukkan penggunaan variabel LESS secara detail.
Sr.No.
Variabel penggunaan & Deskripsi
1
Gambaran
Pengulangan nilai yang sama berkali-kali dapat dihindari dengan menggunakan variabel .
2
Variabel Interpolasi
Variabel juga dapat digunakan di tempat lain seperti nama pemilih , nama properti , URL dan pernyataan @import .
3
Nama Variabel
Kita dapat mendefinisikan variabel dengan nama variabel yang terdiri dari sebuah nilai.
4
Pemuatan Lambat
Dalam lazy loading, variabel bisa digunakan meski tidak.
5
Variabel Default
Variabel default memiliki kemampuan untuk menyetel variabel hanya jika belum disetel. Fitur ini tidak diperlukan karena variabel dapat dengan mudah diganti dengan mendefinisikannya setelahnya.
Extend adalah kelas semu LESS yang memperluas gaya selektor lain dalam satu selektor dengan menggunakan :extend pemilih.
Contoh
Contoh berikut menunjukkan penggunaan extends di file LESS -
extends_syntax.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "style">
<h2>Welcome to TutorialsPoint</h2>
<p>Hello!!!!!</p>
</div>
</body>
</html>
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file extend_syntax.htm mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Perpanjang Sintaks
Perpanjang ditempatkan ke seperangkat aturan atau dilampirkan ke pemilih. Ini mirip dengan kelas semu yang berisi satu atau lebih kelas, yang dipisahkan dengan koma. Menggunakan kata kunci opsionalall, setiap selektor dapat diikuti.
Contoh
Contoh berikut menunjukkan penggunaan sintaks perluasan di file LESS -
extends_syntax.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "style">
<h2>Welcome to TutorialsPoint</h2>
<div class = "container">
<p>Hello!!!!!</p>
</div>
</div>
</body>
</html>
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file extend_syntax.htm mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Tabel berikut mencantumkan semua jenis sintaks perluasan yang dapat Anda gunakan di LESS -
Sr.No.
Jenis & Deskripsi
1
Perpanjang Terlampir ke Selector
Perpanjang terhubung ke selektor yang terlihat mirip dengan kelas semu dengan selektor sebagai parameter.
2
Perluas Inside Ruleset
Itu &:extend(selector) sintaks dapat diletakkan di dalam tubuh kumpulan aturan.
3
Memperluas Pemilih Bersarang
Pemilih bersarang dicocokkan menggunakan pemilih perluasan .
4
Pencocokan Persis dengan Perpanjang
Secara default, extend mencari kecocokan persis di antara penyeleksi.
5
Ekspresi ke-n
Bentuk ekspresi ke-n penting jika tidak, ia memperlakukan selektor sebagai berbeda.
6
Perpanjang "semua"
Ketika kata kunci semuanya diidentifikasi pada akhirnya diextend argumen kemudian LESS cocok dengan pemilih itu sebagai bagian dari pemilih lain.
7
Interpolasi Selektor dengan Perpanjang
Itu extend dapat dihubungkan ke pemilih interpolasi.
8
Scoping / Perluas di dalam @media
Perluas hanya cocok dengan selektor yang ada di dalam deklarasi media yang sama.
9
Deteksi Duplikasi
Itu tidak dapat mendeteksi duplikasi pemilih.
Berikut adalah jenis Use Case untuk Perpanjang
Sr.No.
Jenis & Deskripsi
1
Kasus Penggunaan Klasik
Kasus penggunaan klasik digunakan untuk menghindari penambahan kelas dasar di LESS.
2
Mengurangi Ukuran CSS
Perpanjang digunakan untuk memindahkan pemilih sejauh properti yang ingin Anda gunakan; ini membantu dalam mengurangi kode yang dihasilkan css.
3
Menggabungkan Gaya / Mixin yang Lebih Canggih
Dengan menggunakan perpanjangan kita dapat menggabungkan gaya yang sama dari selektor tertentu ke selektor lainnya.
Mixin mirip dengan fungsi dalam bahasa pemrograman. Mixins adalah sekelompok properti CSS yang memungkinkan Anda menggunakan properti satu kelas untuk kelas lain dan menyertakan nama kelas sebagai propertinya. Di LESS, Anda dapat mendeklarasikan mixin dengan cara yang sama seperti gaya CSS menggunakan pemilih kelas atau id. Itu dapat menyimpan banyak nilai dan dapat digunakan kembali dalam kode kapan pun diperlukan.
Tabel berikut menunjukkan penggunaan mixin LESS secara detail.
Sr.No.
Penggunaan & Deskripsi Mixins
1
Tidak Mengeluarkan Mixin
Mixin dapat dibuat menghilang dalam keluaran hanya dengan menempatkan tanda kurung setelahnya.
2
Penyeleksi di Mixins
Mixin tidak hanya berisi properti, tetapi juga dapat berisi penyeleksi.
3
Namespaces
Namespaces digunakan untuk mengelompokkan mixin di bawah nama umum.
4
Namespaces yang Dijaga
Saat guard diterapkan ke namespace, mixin yang ditentukan olehnya hanya digunakan jika kondisi penjaga mengembalikan nilai true.
5
Kata kunci! Penting
Kata kunci ! Important digunakan untuk menimpa properti tertentu.
Contoh
Contoh berikut menunjukkan penggunaan mixin dalam file LESS -
<html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>LESS Mixins</title>
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
<p class = "p1">LESS is a CSS pre-processor that enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<p class = "p3">LESS is cross browser friendly.</p>
</body>
</html>
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file less_mixins.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Tanda kurung adalah opsional saat memanggil mixin. Dalam contoh di atas, kedua pernyataan.p1(); dan .p1; lakukan hal yang sama.
Deskripsi
Mixin parametrik menggunakan satu atau lebih parameter yang memperluas fungsionalitas LESS dengan mengambil argumen dan propertinya untuk menyesuaikan keluaran mixin saat dicampur ke dalam blok lain.
Misalnya, pertimbangkan cuplikan kode LESS sederhana -
Di sini kita menggunakan mixin parametrik sebagai .border dengan tiga parameter - lebar, gaya, dan warna. Dengan menggunakan parameter ini, Anda dapat menyesuaikan output mixin dengan nilai parameter yang diteruskan.
Tabel berikut menjelaskan berbagai jenis campuran parametrik beserta deskripsi.
Sr.No.
Jenis & Deskripsi
1
Mixins dengan Beberapa Parameter
Parameter dapat dipisahkan menggunakan koma atau titik koma.
2
Parameter Bernama
Mixins memberikan nilai parameter alih-alih posisi dengan menggunakan namanya.
3
@ Argumen Variabel
Saat sebuah mixin dipanggil, @arguments menyertakan semua argumen yang diteruskan.
4
Argumen Lanjutan dan Variabel @rest
Mixin mengambil sejumlah variabel dari argumen dengan menggunakan .....
5
Pencocokan pola
Ubah perilaku mixin dengan meneruskan parameter ke dalamnya.
Dalam bab ini, kita akan memahami pentingnya Mixins as Functions. Seperti halnya fungsi, mixin dapat disarangkan, dapat menerima parameter, dan juga mengembalikan nilai.
Tabel berikut menunjukkan penggunaan mixin sebagai fungsi secara detail.
Sr.No.
Penggunaan & Deskripsi Mixins
1
Lingkup mixin
Mixin terdiri dari variabel; ini dapat digunakan dalam cakupan pemanggil dan terlihat.
2
Mixin dan mengembalikan nilai
Mixin mirip dengan fungsi dan variabel yang ditentukan dalam mixin akan berperilaku sebagai nilai yang dikembalikan.
3
Campur di dalam mixin lain
Setiap kali mixin didefinisikan di dalam mixin lain, ini juga dapat digunakan sebagai nilai pengembalian.
Deskripsi
Kumpulan aturan terpisah berisi kumpulan aturan seperti properti, kumpulan aturan bersarang, deklarasi variabel, mixin, dll. Ini disimpan dalam variabel dan dimasukkan dalam struktur lain; semua properti dari kumpulan aturan disalin ke struktur itu.
Contoh
Contoh berikut menunjukkan cara meneruskan kumpulan aturan ke mixin di file LESS -
passing_ruleset.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web.</p>
</div>
</body>
</html>
Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -
style.css
.cont {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
Keluaran
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file passing_ruleset.htm mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Scoping
Semua variabel dan mixin dalam kumpulan aturan terpisah tersedia di mana pun kumpulan aturan dipanggil atau ditentukan. Jika tidak, baik pemanggil dan cakupan definisi tersedia secara default. Cakupan deklarasi diprioritaskan ketika kedua cakupan berisi mixin atau variabel yang sama. Badan kumpulan aturan yang terpisah ditentukan dalam cakupan deklarasi. Itu tidak mengubah ruang lingkupnya setelah kumpulan aturan yang terlepas disalin dari satu variabel ke variabel lainnya.
Tabel berikut mencantumkan semua jenis cakupan -
Sr.No.
Jenis & Deskripsi
1
Definisi dan Visibilitas Lingkup Penelepon
Variabel dan mixin didefinisikan di dalam kumpulan aturan yang terpisah.
2
Mereferensikan Tidak Akan Memodifikasi Cakupan Kumpulan Aturan yang Terpisah
Hanya memberikan referensi, kumpulan aturan tidak mengakses ke cakupan baru apa pun.
3
Membuka Kunci Akan Memodifikasi Cakupan Ruleset Terpisah
Kumpulan aturan yang terlepas dapat mengakses cakupan dengan diimpor ke dalamnya.
Deskripsi
Itu @importdirektif digunakan untuk mengimpor file dalam kode. Ini menyebarkan kode LESS ke file yang berbeda dan memungkinkan untuk mempertahankan struktur kode dengan mudah. Anda dapat meletakkan pernyataan @import di mana saja dalam kode.
Misalnya, Anda dapat mengimpor file dengan menggunakan @importkata kunci sebagai @import "file_name.less" .
Ekstensi File
Anda dapat menggunakan pernyataan @import tergantung pada ekstensi file yang berbeda seperti -
Jika Anda menggunakan ekstensi .css , maka itu akan dianggap sebagai CSS dan pernyataan @import tetap apa adanya.
Jika itu berisi ekstensi lain, maka itu akan dianggap LESS dan akan diimpor.
Jika tidak ada ekstensi LESS, maka itu akan ditambahkan dan dimasukkan sebagai file LESS yang diimpor.
@import "style"; // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php"; // imports the style.php as a less file
@import "style.css"; // it will kept the statement as it is
Contoh
Contoh berikut menunjukkan penggunaan variabel dalam file SCSS -
<!doctype html>
<head>
<title>Import Directives</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Import Directives</h2>
<p class = "myline">Welcome to Tutorialspoint...</p>
</body>
</html>
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file import_directives.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Dalam bab ini, kita akan memahami pentingnya Import OptionsMinimal. LESS menawarkan@import pernyataan yang memungkinkan lembar gaya untuk mengimpor lembar gaya LESS dan CSS.
Tabel berikut mencantumkan petunjuk impor yang akan diterapkan dalam pernyataan impor.
Sr.No.
Opsi & Deskripsi Impor
1
referensi
Ini menggunakan file LESS hanya sebagai referensi dan tidak akan menampilkannya.
2
Di barisan
Ini memungkinkan Anda untuk menyalin CSS Anda ke dalam output tanpa diproses.
3
kurang
Ini akan memperlakukan file yang diimpor sebagai file LESS biasa, terlepas dari apa pun ekstensi file tersebut.
4
css
Ini akan memperlakukan file yang diimpor sebagai file CSS biasa, terlepas dari apa pun ekstensi file tersebut.
5
sekali
Ini akan mengimpor file hanya satu kali.
6
banyak
Ini akan mengimpor file beberapa kali.
7
pilihan
Ini terus mengkompilasi meskipun file yang akan diimpor tidak ditemukan.
Lebih dari satu kata kunci diizinkan untuk digunakan di @import pernyataan, namun Anda harus menggunakan koma untuk memisahkan kata kunci.
Misalnya -
@import (less, optional) "custom.css";
Deskripsi
Jika Anda ingin mencocokkan nilai atau jumlah argumen sederhana pada ekspresi, maka Anda dapat menggunakan penjaga. Ini terkait dengan deklarasi mixin dan termasuk kondisi yang dilampirkan ke mixin. Setiap mixin akan memiliki satu atau lebih penjaga yang dipisahkan dengan koma; pelindung harus diapit tanda kurung. LESS menggunakan mixin yang dilindungi, bukanif/else pernyataan dan melakukan perhitungan untuk menentukan mixin yang cocok.
Tabel berikut menjelaskan berbagai jenis pelindung mixin beserta penjelasannya.
Sr.No.
Jenis & Deskripsi
1
Operator Perbandingan Pelindung
Anda dapat menggunakan operator perbandingan (=) untuk membandingkan angka, string, pengenal, dll.
2
Penjaga Operator Logis
Anda dapat menggunakan kata kunci dan untuk mengatasi operator logika dengan penjaga.
3
Ketik Memeriksa Fungsi
Ini berisi fungsi built-in untuk menentukan tipe nilai untuk mixin yang cocok.
4
Mixin Bersyarat
LESS menggunakan fungsi default untuk mencocokkan mixin dengan pencocokan pencampuran lainnya.
Contoh
Contoh berikut menunjukkan penggunaan penjaga mixin di file LESS -
<!doctype html>
<head>
<title>Mixin Guards</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Mixin Guards</h2>
<p class = "class1">Hello World...</p>
<p class = "class2">Welcome to Tutorialspoint...</p>
</body>
</html>
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file mixin-guard.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Deskripsi
Penjaga digunakan untuk mencocokkan nilai sederhana atau sejumlah argumen pada ekspresi. Ini diterapkan ke pemilih CSS. Ini adalah sintaks untuk mendeklarasikan mixin dan memanggilnya segera. Untuk berhasil mengeluarkan fileifjenis pernyataan; bergabunglah dengan fitur ini&, yang memungkinkan Anda mengelompokkan beberapa penjaga.
Contoh
Contoh berikut menunjukkan penggunaan css jaga di file KURANG -
css_guard.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
</div>
<div class = "style">
<h3>The largest Tutorials Library on the web.</h3>
</div>
</body>
</html>
Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -
style.css
.style {
background-color: blue;
color: white;
}
Keluaran
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file css_guard.htm mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Dalam bab ini, kita akan memahami cara kerja Loops di LESS. Pernyataan loop memungkinkan kita untuk mengeksekusi pernyataan atau sekelompok pernyataan beberapa kali. Berbagai struktur iteratif / loop dapat dibuat ketika mixin rekursif digabungkan denganGuard Expressions dan Pattern Matching.
Contoh
Contoh berikut menunjukkan penggunaan loop di file LESS -
loop_example.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web. </p>
</div>
</body>
</html>
Selanjutnya, buat file style.less .
style.less
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file loop_example.htm mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
Deskripsi
Fitur di LESS ini memungkinkan penambahan nilai ke daftar yang dipisahkan koma atau spasi dari beberapa properti menggunakan satu properti. Ini dapat digunakan untuk latar belakang dan mengubah properti.
Tabel berikut menjelaskan dua tipe fungsi yang didukung oleh fitur Gabung.
Sr.No.
Jenis & Deskripsi
1
Koma
Itu menambah nilai properti di akhir.
2
Ruang
Itu menambah nilai properti dengan ruang.
Dalam bab ini, mari kita pahami caranya Parent Selectorskerja. Dimungkinkan untuk mereferensikan pemilih induk dengan menggunakan&(ampersand) operator. Pemilih induk dari aturan bertingkat diwakili oleh& operator dan digunakan saat menerapkan kelas pengubah atau kelas semu ke pemilih yang ada.
Tabel berikut menunjukkan jenis pemilih induk -
Sr.No.
Jenis & Deskripsi
1
Banyak &
Itu & akan mewakili pemilih terdekat dan juga semua pemilih induk.
2
Mengubah Urutan Pemilih
Mempersiapkan pemilih ke pemilih yang diwarisi (induk) berguna saat urutan pemilih diubah.
3
Combinatorial Explosion
Itu & juga dapat menghasilkan semua permutasi selektor yang mungkin dalam daftar yang dipisahkan dengan koma.
Contoh
Contoh berikut menunjukkan penggunaan selektor induk di file LESS -
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
Anda dapat mengompilasi file style.less ke style.css dengan menggunakan perintah berikut -
lessc style.less style.css
Jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -
style.css
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
Dalam contoh di atas, & mengacu pada pemilih a.
Keluaran
Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -
Simpan kode html di atas di file parent_selector1.htm mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.
The penyeleksi Induk operator memiliki banyak kegunaan seperti, ketika Anda perlu untuk menggabungkan pemilih aturan bersarang di cara lain selain default. Penggunaan khas lainnya&adalah membuat nama kelas berulang kali. Untuk informasi lebih lanjut klik di sini .
Fungsi lain-lain terdiri dari sekelompok fungsi dari jenis yang berbeda.
Tabel berikut mencantumkan semua jenis fungsi misc -
Sr.No.
Fungsi & Deskripsi
1
warna
Ini adalah string yang mewakili warna.
2
ukuran gambar
Ini digunakan untuk memeriksa dimensi gambar dari file.
3
lebar gambar
Ini memeriksa lebar gambar dari file.
4
tinggi gambar
Ini memeriksa ketinggian gambar dari file.
5
mengubah
Suatu angka diubah dari satu unit ke unit lainnya.
6
data - uri
Data uri adalah skema pengidentifikasi sumber daya seragam (URI) yang mendapatkan sumber daya sebaris di halaman web.
7
default
Fungsi default mengembalikan nilai true hanya jika tersedia di dalam kondisi penjaga dan tidak cocok dengan mixin lainnya.
8
satuan
Fungsi default mengembalikan nilai true hanya jika tersedia di dalam kondisi penjaga dan tidak cocok dengan mixin lainnya
9
dapatkan - unit
get - fungsi unit mengembalikan unitnya di mana argumennya ada dengan angka dan unit.
10
svg - gradien
svg-gradient adalah transisi dari satu warna ke warna lainnya. Itu dapat menambahkan banyak warna ke elemen yang sama.
Deskripsi
Kurang mendukung beberapa fungsi string seperti yang tercantum di bawah ini -
escape
e
% format
replace
Tabel berikut menjelaskan fungsi string di atas beserta deskripsi.
Sr.No.
Jenis & Deskripsi
Contoh
1
Escape
Ini mengkodekan string atau informasi dengan menggunakan pengkodean URL pada karakter khusus. Anda tidak dapat menyandikan beberapa karakter seperti, , / , ? , @ , & , + , ~ , ! , $ , ' dan beberapa karakter yang dapat Anda encode seperti \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ dan =.
escape("Hello!! welcome to Tutorialspoint!")
Ini mengeluarkan string yang lolos sebagai -
Hello%21%21%20welcome%20to%20Tutorialspoint%21
2
e
Ini adalah fungsi string yang menggunakan string sebagai parameter dan mengembalikan informasi tanpa tanda kutip. Ini adalah pelolosan CSS yang menggunakan nilai dan angka lolos ~ "beberapa konten" sebagai parameter.
filter: e("Hello!! welcome to Tutorialspoint!");
Ini mengeluarkan string yang lolos sebagai -
filter: Hello!! welcome to Tutorialspoint!;
3
% format
Fungsi ini memformat string. Itu dapat ditulis dengan format berikut -
Ini mengambil nilai sebagai parameter dan mengembalikan benar , jika nilai dalam persentase atau mengembalikan salah , jika nilai bukan dalam persentase.
Ini mengembalikan benar jika nilai adalah angka dalam unit tertentu yang disediakan sebagai parameter atau akan mengembalikan salah jika nilai bukan angka dalam unit tertentu.
LESS menyediakan sejumlah fungsi warna yang berguna untuk mengubah dan memanipulasi warna dengan cara yang berbeda. LESS mendukung beberapa Fungsi Definisi Warna seperti yang ditunjukkan pada tabel di bawah ini -
Sr.No.
Deskripsi fungsi
Contoh
1
rgb
Ini menciptakan warna dari nilai merah, hijau dan biru. Ini memiliki parameter berikut -
red - Berisi integer antara 0 - 255 atau persentase antara 0 - 100%.
green - Berisi integer antara 0 - 255 atau persentase antara 0 - 100%.
blue - Berisi integer antara 0 - 255 atau persentase antara 0 - 100%.
rgb(220,20,60)
itu mengubah warna dengan nilai rgb sebagai -
#dc143c
2
rgba
Ini menentukan warna dari nilai merah, hijau, biru dan alfa. Ini memiliki parameter berikut -
red - Berisi integer antara 0 - 255 atau persentase antara 0 - 100%.
green - Berisi integer antara 0 - 255 atau persentase antara 0 - 100%.
blue - Berisi integer antara 0 - 255 atau persentase antara 0 - 100%.
alpha - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
rgba(220,20,60, 0.5)
itu mengubah objek warna dengan nilai rgba sebagai -
rgba(220, 20, 60, 0.5)
3
argb
Ini mendefinisikan representasi warna hex dalam #AARRGGBBformat. Ini menggunakan parameter berikut -
color - Ini menentukan objek warna.
argb(rgba(176,23,31,0.5))
itu mengembalikan warna argb sebagai -
#80b0171f
4
hsl
Ini menghasilkan warna dari nilai hue, saturation dan lightness. Ini memiliki parameter berikut -
hue - Berisi bilangan bulat antara 0 - 360 yang mewakili derajat.
saturation - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
lightness - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
hsl(120,100%, 50%)
itu mengembalikan objek warna menggunakan nilai HSL sebagai -
#00ff00
5
hsla
Ini menghasilkan warna dari nilai hue, saturation, lightness dan alpha. Ini memiliki parameter berikut -
hue - Berisi bilangan bulat antara 0 - 360 yang mewakili derajat.
saturation - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
lightness - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
alpha - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
hsla(0,100%,50%,0.5)
itu menentukan objek warna menggunakan nilai HSLA sebagai -
rgba(255, 0, 0, 0.5);
6
hsv
Ini menghasilkan warna dari nilai rona, saturasi dan nilai. Ini berisi parameter berikut -
hue - Berisi bilangan bulat antara 0 - 360 yang mewakili derajat.
saturation - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
value - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
hsv(80,90%,70%)
itu mengubah objek warna dengan nilai hsv sebagai -
#7db312
7
hsva
Ini menghasilkan warna dari nilai hue, saturation, value dan alpha. Ini menggunakan parameter berikut -
hue - Berisi bilangan bulat antara 0 - 360 yang mewakili derajat.
saturation - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
value - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
alpha - Berisi angka antara 0 - 1 atau persentase antara 0 - 100%.
hsva(80,90%,70%,0.6)
itu menentukan objek warna dengan nilai hsva sebagai -
rgba(125, 179, 18, 0.6)
Dalam bab ini, kita akan memahami pentingnya Fungsi Saluran Warna di LESS. LESS mendukung beberapa fungsi built-in yang menetapkan nilai tentang saluran. Saluran mengatur nilai tergantung pada definisi warna. Warna HSL memiliki saluran hue, saturation dan lightness dan warna RGB memiliki saluran merah, hijau dan biru. Tabel berikut mencantumkan semua fungsi saluran warna -
Sr.No.
Deskripsi fungsi
Contoh
1
hue
Dalam ruang warna HSL, saluran warna diekstraksi dari objek warna.
background: hue(hsl(75, 90%, 30%));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 75;
2
saturation
Dalam ruang warna HSL, saluran saturasi diekstraksi dari objek warna.
background: saturation(hsl(75, 90%, 30%));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 90%;
3
lightness
Dalam ruang warna HSL, saluran kecerahan diekstraksi dari objek warna.
background: lightness(hsl(75, 90%, 30%));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 30%;
4
hsvhue
Dalam ruang warna HSV, saluran warna diekstraksi dari objek warna.
background: hsvhue(hsv(75, 90%, 30%));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 75;
5
hsvsaturation
Dalam ruang warna HSL, saluran saturasi diekstraksi dari objek warna.
background: hsvsaturation(hsv(75, 90%, 30%));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 90%;
6
hsvvalue
Dalam ruang warna HSL, saluran nilai diekstraksi dari objek warna.
background: hsvvalue(hsv(75, 90%, 30%));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 30%;
7
red
Saluran merah diekstraksi dari objek warna.
background: red(rgb(5, 15, 25));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 5;
8
green
Saluran hijau diekstraksi dari objek warna.
background: green(rgb(5, 15, 25));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 15;
9
blue
Saluran biru diekstraksi dari objek warna.
background: blue(rgb(5, 15, 25));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 25;
10
alpha
Saluran alfa diekstraksi dari objek warna.
background: alpha(rgba(5, 15, 25, 1.5));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 2;
11
luma
nilai luma dihitung dari objek warna.
background: luma(rgb(50, 250, 150));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 71.2513323%;
12
luminance
Nilai luma dihitung tanpa koreksi gamma.
background: luminance(rgb(50, 250, 150));
Ini dikompilasi di CSS seperti yang ditunjukkan di bawah ini -
background: 78.53333333%;
Deskripsi
LESS menyediakan sejumlah fungsi operasi yang berguna untuk mengubah dan memanipulasi warna dengan cara berbeda dan mengambil parameter dalam unit yang sama. LESS mendukung beberapa Fungsi Operasi Warna seperti yang ditunjukkan pada tabel di bawah ini -
Sr.No.
Petunjuk & Deskripsi
1
jenuh
Ini memvariasikan intensitas atau saturasi warna dalam elemen.
2
desaturate
Ini mengurangi intensitas atau saturasi warna dalam elemen.
3
meringankan
Ini meningkatkan kecerahan warna dalam elemen.
4
menggelapkan
Ini memvariasikan intensitas atau saturasi warna dalam elemen.
5
fadein
Ini meningkatkan opacity untuk elemen yang dipilih.
6
fadeout
Ini mengurangi opacity untuk elemen yang dipilih.
7
luntur
Ini digunakan untuk mengatur transparansi warna untuk elemen yang dipilih.
8
berputar
Ini digunakan untuk memutar sudut warna untuk elemen yang dipilih.
9
campuran
Ini mencampur dua warna bersama dengan opacity.
10
warna
Ini mencampur warna dengan putih saat Anda mengurangi proporsi warna.
11
naungan
Ini mencampur warna dengan hitam saat Anda mengurangi proporsi warnanya.
12
abu-abu
Ini membuang saturasi dari warna di elemen yang dipilih.
13
kontras
Ini mengatur kontras untuk warna di elemen.
Dalam bab ini, kita akan memahami Color Blending FunctionsMinimal. Ini adalah operasi serupa yang digunakan di editor gambar seperti Photoshop, Fireworks atau GIMP, yang mencocokkan warna CSS dengan gambar Anda.
Tabel berikut menunjukkan fungsi pencampuran warna yang digunakan di LESS.
Sr.No.
Fungsi & Deskripsi
1
berkembang biak
Ini mengalikan dua warna dan mengembalikan warna yang dihasilkan.
2
layar
Dibutuhkan dua warna dan mengembalikan warna yang lebih cerah. Ia bekerja kebalikan dari fungsi perkalian .
3
hamparan
Ini menghasilkan hasil dengan menggabungkan efek multiply dan screen .
4
cahaya lembut
Ini berfungsi mirip dengan overlay tetapi hanya menggunakan sebagian warna, yang menyorot lembut warna lain.
5
hardlight
Cara kerjanya mirip dengan overlay tetapi peran warna dibalik.
6
perbedaan
Ini mengurangi warna masukan kedua dari warna masukan pertama.
7
pengecualian
Ia bekerja mirip dengan fungsi perbedaan tetapi dengan kontras yang lebih rendah.
8
rata-rata
Ini menghitung rata-rata dua warna input pada basis per saluran (RGB).
9
penyangkalan
Ia bekerja berlawanan dengan fungsi perbedaan , yang mengurangi warna pertama dari warna kedua.
Dengan menggunakan baris perintah, kita dapat mengkompilasi file .less menjadi .css .
Menginstal Lessc untuk Digunakan Secara Global
Perintah berikut digunakan untuk menginstal lessc dengan npm (node ​​package manager) agar lessc tersedia secara global.
npm install less -g
Anda juga dapat menambahkan versi tertentu setelah nama paket. Sebagai contohnpm install [email protected] -g
Menginstal untuk Pengembangan Node
Perintah berikut digunakan untuk menginstal versi terbaru dari lessc di folder proyek Anda.
npm i less -save-dev
Itu juga ditambahkan ke devDependencies di project package.json Anda.
Rilis beta dari lessc
Itu ditandai sebagai beta saat lessc struktur dipublikasikan ke npmDi sini, fungsi baru dikembangkan secara berkala. less -v digunakan untuk mendapatkan versi saat ini.
Menginstal versi pengembangan lessc yang tidak dipublikasikan
Komit - ish harus ditentukan, saat kita melanjutkan untuk memasang versi lessc yang tidak dipublikasikan dan petunjuknya harus diikuti untuk mengidentifikasi URL git sebagai ketergantungan. Ini akan memastikan bahwa Anda menggunakan versi leesc yang benar untuk proyek Anda.
Penggunaan Sisi Server dan Baris Perintah
bin/lessctermasuk biner dalam repositori. Ia bekerja dengan Windows, OS X dan nodejs di * nix.
Penggunaan Baris Perintah
Input dibaca dari stdin ketika sumber disetel ke tanda hubung atau tanda hubung (-).
Misalnya, kita dapat mengkompilasi .less untuk .css dengan menggunakan perintah berikut -
lessc stylesheet.less stylesheet.css
Kami dapat mengkompilasi .less untuk .css dengan dan mengecilkan hasil menggunakan perintah berikut.
lessc -x stylesheet.less stylesheet.css
Pilihan
Tabel berikut mencantumkan opsi yang digunakan dalam penggunaan baris perintah -
Sr.No.
Opsi & Deskripsi
Perintah
1
Help
Pesan bantuan ditampilkan dengan pilihan yang tersedia.
lessc -help
lessc -h
2
Include Paths
Ini mencakup jalur yang tersedia ke perpustakaan. Jalur ini dapat direferensikan secara sederhana dan relatif di file Less. Path di windows dipisahkan oleh titik dua (:) atau titik koma (;).
lessc --include-path = PATH1;PATH2
3
Makefile
Ini menghasilkan daftar dependensi impor makefile ke stdout sebagai output.
lessc -M
lessc --depends
4
No Color
Ini menonaktifkan keluaran berwarna.
lessc --no-color
5
No IE Compatibility
Ini menonaktifkan pemeriksaan kompatibilitas IE.
lessc --no-ie-compat
6
Disable Javascript
Ini menonaktifkan javascript di lebih sedikit file.
lessc --no-js
7
Lint
Ia memeriksa sintaks dan melaporkan kesalahan tanpa keluaran apa pun.
lessc --lint
lessc -l
8
Silent
Ini secara paksa menghentikan tampilan pesan kesalahan.
lessc --silent
lessc -s
9
Strict Imports
Itu memaksa mengevaluasi impor.
lessc --strict-imports
10
Allow Imports from Insecure HTTPS Hosts
Ini mengimpor dari host HTTPS yang tidak aman.
lessc --insecure
11
Version
Ini menampilkan nomor versi dan keluar.
lessc -version
lessc -v
12
Compress
Ini membantu dalam menghilangkan spasi dan memampatkan output.
lessc -x
lessc --compress
13
Source Map Output Filename
Ini menghasilkan peta sumber lebih sedikit. Jika opsi peta sumber ditentukan tanpa nama file maka itu akan menggunakan peta ekstensi dengan nama file Less sebagai sumber.
lessc --source-map
lessc -source-map = file.map
14
Source Map Rootpath
Jalur root ditentukan dan harus ditambahkan ke jalur file Less di dalam peta sumber dan juga ke file peta yang ditentukan dalam css keluaran Anda.
lessc --source-map-rootpath = dev-files/
15
Source Map Basepath
Sebuah jalur ditentukan yang harus dihapus dari jalur keluaran. Basepath kebalikan dari opsi rootpath.
lessc --source-map-basepath = less-files/
16
Source Map Less Inline
Semua file Less harus disertakan dalam peta sumber.
lessc --source-map-less-inline
17
Source Map Map Inline
Ini menentukan bahwa dalam css keluaran, file peta harus sebaris.
lessc --source-map-map-inline
18
Source Map URL
Sebuah URL diperbolehkan untuk menimpa titik-titik dalam file peta di css.
lessc --source-map-url = ../my-map.json
19
Rootpath
Ini menetapkan jalur untuk penulisan ulang URL dalam impor relatif dan url.
lessc -rp=resources/
lessc --rootpath=resources/
20
Relative URLs
Dalam file yang diimpor, URL ditulis ulang sehingga URL selalu berhubungan dengan file dasar.
lessc -ru
lessc --relative-urls
21
Strict Math
Ini memproses semua fungsi Matematika di css Anda. Secara default, ini mati.
lessc -sm = on
lessc --strict-math = on
22
Strict Units
Ini memungkinkan unit campuran.
lessc -su = on
lessc --strict-units = on
23
Global Variable
Variabel ditentukan yang dapat direferensikan oleh file.
lessc --global-var = "background = green"
24
Modify Variable
Ini tidak seperti opsi variabel global; itu memindahkan deklarasi di akhir file less Anda.
lessc --modify-var = "background = green"
25
URL Arguments
Untuk berpindah ke setiap URL, argumen diperbolehkan untuk ditentukan.
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 -
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 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.
Modifikasi run time variabel LESS diaktifkan. File LESS dikompilasi ulang ketika nilai baru dipanggil. Kode berikut menunjukkan penggunaan dasar dari variabel modifikasi -
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 .
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 disetel. Ini membantu dalam men-debug aturan tertentu berasal.
env- Ini adalah tipe string. Env dapat berjalan dalam pengembangan atau produksi. Pengembangan diatur secara otomatis saat URL dokumen dimulai denganfile:// atau ada di komputer 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 lebih sedikit file digunakan untuk memanggil modifikator di mana semua file yang lebih sedikit tidak akan diambil lagi.
LESS ramah lintas-browser. Ini mendukung browser modern seperti Google Chrome, Mozilla Firefox, Safari dan Internet Explorer dan memungkinkan penggunaan kembali elemen CSS dan menulis kode LESS dengan semantik yang sama. Anda harus berhati-hati tentang implikasi kinerja saat menggunakan LESS di sisi klien dan saat menampilkan JavaScript untuk menghindari masalah kosmetik seperti
Kesalahan pengejaan,
Perubahan warna,
Texture
Look
Tautan, dll.
Kompilasi file LESS di sisi server untuk meningkatkan tingkat kinerja situs web.
PhantomJS tidak mengimplementasikan fungsi Function.prototype.bind , jadi Anda perlu menggunakan mesin JavaScript es5 shim untuk berjalan di bawah PhantomJS. Pengguna dapat membuat penyesuaian dengan variabel untuk mempengaruhi tema dan menampilkannya secara real time dengan menggunakan sisi klien LESS dalam produksi.
Jika Anda ingin menjalankan LESS di browser lama, gunakan mesin JavaScript es-5 shim yang menambahkan fitur JavaScript yang didukung LESS. Anda dapat menggunakan atribut pada script atau link tag dengan menggunakan JSON.parse yang harus didukung oleh browser.
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.
The pilihan adalah argumen opsional yang mengembalikanpromise ketika Anda tidak menentukan callback dan mengembalikan a promisesaat Anda menentukan panggilan balik. Anda dapat menampilkan file dengan membacanya menjadi string dan mengatur field nama file dari file utama.
The sourceMap pilihan memungkinkan untuk pilihan sourcemap set seperti sourceMapURL , sourceMapBasepath , sourceMapRootpath , outputSourceFiles dan sourceMapFileInline . Hal yang perlu dipertimbangkan di sini adalah bahwa opsi sourceMap tidak tersedia untuk less.js.
Anda bisa mendapatkan akses ke log dengan menambahkan pendengar seperti yang ditunjukkan pada format di bawah ini -
Fungsi yang ditentukan di atas adalah opsional. Jika kesalahan ditampilkan, maka kesalahan akan diteruskan kecallback atau promisehadir di less.render .
Pada bab ini, kita akan memahami pentingnya kompiler online di LESS. Kompiler online digunakan untuk mengkompilasi kode yang lebih sedikit menjadi kode css. Alat kompiler online dengan mudah membantu menghasilkan kode css. Berikut ini adalah kurang kompiler online yang tersedia -
winless.org/online-less-compiler
lesstester.com
dopefly.com/less-converte
lessphp.gpeasy.com/demo
leafo.net/lessphp/editor
estFiddle
IDE / Playground Web Online dengan Lebih sedikit dukungan
Berikut adalah IDE Web Online yang tersedia dengan Lebih sedikit dukungan.
Sr.No.
Deskripsi & IDE Web Online
1
CSSDeck Labs
Ini adalah tempat di mana Anda dapat dengan mudah membuat testcase yang melibatkan kode HTML, CSS, JS.
2
CodePen
Ini adalah taman bermain untuk web frontend.
3
Salad Fiddle
Ini adalah tempat di mana Anda dapat menambahkan kode yang ada di lingkungan.
4
JS Bin
Ini membantu kode Javascript dan CSS.
5
jsFiddle
Ini adalah editor web online.
Dalam bab ini, kita akan memahami GUI untuk LESS . Anda dapat menggunakan alat LESS yang berbeda untuk platform Anda. Untuk penggunaan dan alat baris perintah , klik tautan ini .
Tabel berikut mencantumkan kompiler GUI yang mendukung lintas platform.
Sr.No.
Alat & Deskripsi
1
Crunch 2!
Mendukung lintas platform seperti Windows, Mac dan Linux . Ini menyediakan editor dengan kompilasi terintegrasi.
2
Mixture
Ini adalah prototipe cepat dan alat pembuatan situs statis yang digunakan oleh desainer dan pengembang. Ini cepat, efisien dan bekerja dengan baik dengan editor Anda. Ini menyatukan koleksi alat dan praktik terbaik yang mengagumkan.
3
SimpLESS
Ini adalah kompiler LESS minimalis. Ini menyediakan fungsionalitas seret, lepas, dan kompilasi. SimpLESS mendukung prefiks CSS Anda dengan menggunakan prefixr yang merupakan fitur unik dari SimpLESS. Itu dibangun di atas platform Titanium.
4
Koala
Ini digunakan untuk mengkompilasi LESS, SASS dan CoffeeScript. Ini menyediakan fitur seperti kompilasi dukungan pemberitahuan kesalahan dan pilihan kompilasi mendukung.
Tabel berikut mencantumkan kompiler GUI yang mendukung platform Windows.
Sr.No.
Alat & Deskripsi
1
Prepros
Ini adalah alat yang mengkompilasi LESS, SASS, Compass, Stylus, Jade dan banyak lagi.
2
WinLess
Awalnya itu adalah tiruan dari LESS.app, itu memiliki beberapa pengaturan dan mengambil lebih banyak fitur pendekatan lengkap. Ini mendukung memulai dengan argumen baris perintah.
Tabel berikut mencantumkan kompiler GUI yang mendukung platform OS X.
Sr.No.
Alat & Deskripsi
1
CodeKit
t adalah penerus LESS.app dan mendukung LESS di antara banyak bahasa pemrosesan lainnya seperti SASS, Jade, Markdown, dan lainnya.
2
LiveReload
Ini mengedit CSS dan mengubah gambar secara instan. SASS, LESS, CoffeeScript, dan lainnya berfungsi dengan baik.
Tabel berikut mencantumkan kompiler GUI yang mendukung platform OS X.
Sr.No.
Alat & Deskripsi
1
Plessc
Ini adalah frontend gui untuk lessc. Ini memiliki fitur seperti penampil log, kompilasi otomatis, membuka file LESS dengan editor yang dipilih dan dukungan peta sumber.
Pada bab ini, kita akan memahami pentingnya editor dan plugin di LESS. Editor adalah sistem atau program yang memungkinkan pengguna untuk mengedit teks. Plugin adalah perangkat lunak yang digunakan untuk memperluas fungsionalitas situs.
Sekarang mari kita bahas editor dan IDE untuk LESS.
Sr.No.
Editor dan IDE & Deskripsi
1
Kegentingan!
Ini mendukung lintas platform seperti Windows, Mac dan Linux . Ini menyediakan editor dengan kompilasi terintegrasi.
2
Meja Kerja Web Mindscape
Ini menyediakan pengeditan CoffeeScript, SASS, Compass dan LESS dan membuat pengembangan web modern menjadi mudah di Visual Studio.
3
NetBeans
Ini adalah IDE berbasis Java open-source. Ini membantu dalam pengembangan cepat aplikasi desktop, seluler, dan web Anda serta aplikasi HTML5 yang melibatkan HTML, JavaScript, dan CSS.
4
TextMate
Ini adalah editor teks grafis untuk tujuan umum untuk Mac OS X. Ini memiliki fitur kustomisasi deklaratif, makro yang dapat direkam, cuplikan, integrasi shell, tab dokumen terbuka dan sistem bundel yang dapat diperluas.
5
Vim
Paket vim menambahkan fungsi seperti indentasi, penyorotan, dan penyelesaian otomatis untuk bahasa stylesheet dinamis KURANG.
6
Emacs
Ini berisi less-css-model yang menyediakan mode Emacs untuk LESS CSS (lesscss.org); Emacs mendukung compile-on-save.
7
jetBrains WebStorm dan PhpStorm
WebStrom adalah IDE yang ringan dan kuat. Ini dilengkapi dengan sempurna untuk pengembangan sisi klien dan server yang kompleks dengan Node.js. PhpStorm adalah IDE PHP, yang mendukung pemahaman kode yang mendalam, dan menyediakan bantuan dan dukungan pengkodean terbaik untuk semua alat dan kerangka kerja utama.
8
Tanda kurung
Ini adalah editor kode sumber terbuka yang ringan, kuat, dan membantu perancang web dan pengembang front-end.
9
CodeLobster
Ini adalah lingkungan pengembangan terintegrasi portabel (IDE) terutama untuk PHP. Ini juga mendukung pengembangan HTML, CSS dan JavaScript dan plugin tersedia untuk Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii dan CakePHP.
10
IDE KineticWing
Ini adalah IDE yang cepat, bersih, ringan dan portabel. Ini adalah paket pengembangan ukuran penuh yang membantu Anda bekerja dengan cerdas dan cepat.
11
nodeMirror
Ini adalah IDE open-source dan mudah disesuaikan. Ini menggunakan CodeMirror.net, pty.js dan pustaka lainnya.
12
Alat HTML-Kit
Ini adalah editor web modern untuk HTML5, CSS3, JavaScript, dan lainnya. Dengan ini, Anda dapat mengedit, melihat pratinjau, memvalidasi publikasi, dan mengelola proyek dari editor yang sesuai standar modern.
Sublime Text 2 & 3
The teks luhur menyediakan pilihan yang berbeda untuk KURANG seperti yang tercantum dalam tabel berikut -
Sr.No.
Opsi & Deskripsi
1
Kurang luhur
Sintaks LESS untuk teks luhur menyediakan penyorotan sintaks untuk file .less , bersama dengan cuplikan.
2
Sublime-Less-to-CSS
Sublime text 2 dan 3 plugin untuk mengkompilasi file .less ke CSS saat Anda menyimpan. Itu membutuhkanlessc diinstal di PATH.
3
Kurang membangun-luhur
Sistem build LESS untuk teks luhur 2 yang menyediakan dua sistem build untuk file LESS, baik yang diperkecil maupun yang tidak dikecilkan.
4
SublimeOnSaveBuild
Ini adalah plugin sederhana untuk teks luhur 2 untuk memicu build saat Anda mengklik Simpan. Bekerja dengan baik dengan pra-prosesor seperti KURANG, Kompas, dan lainnya.
Gerhana
Eclipse memiliki dua plugin untuk LESS seperti yang tercantum dalam tabel berikut -
Sr.No.
Plugin & Deskripsi
1
Plugin Eclipse Less
Dengan memperluas Eclipse IDE, plugin ini menyediakan fitur yang berguna untuk mengedit dan menyusun stylesheet LESS.
2
Plugin Transpiler
Plugin Eclipse ini secara otomatis mentranspilasi file Anda seperti LESS, SASS, CoffeeScript, dll.
Studio visual
Visual Studio memiliki opsi berbeda berikut ini untuk KURANG -
Sr.No.
Opsi & Deskripsi
1
CSS Lebih Sedikit
Ekstensi ini membuat file LESS dibuka dengan layanan bahasa CSS.
2
Web Essentials 2012
Ekstensi ini memungkinkan Anda melakukan tugas-tugas umum dengan lebih mudah dan menambahkan fitur-fitur berguna ke Visual studio untuk pengembang web.
3
Web Essentials 2013
Ini memperluas Visual Studio dengan banyak fitur baru yang tidak spesifik untuk bahasa atau editor tertentu.
4
Alat Web 2013
Ini membantu Anda dalam tugas pengembangan yang melibatkan ASP.NET
Dreamweaver
Poin-poin berikut perlu dipertimbangkan saat bekerja dengan Dreamweaver .
Ini adalah aplikasi Adobe yang digunakan oleh perancang web dan pengembang untuk membuat aplikasi dan situs web.
Ia mampu bekerja di berbagai platform termasuk browser, perangkat dan tablet.
Desainer web menggunakan Dreamweaver untuk membuat prototipe situs web.
DMXzone Less CSS Compiler membuat semua kekuatan LESS CSS langsung di Dreamweaver.
Notepad ++ 6.x
Poin-poin berikut perlu dipertimbangkan saat mengerjakan Notepad ++ .
Notepad ++ adalah editor teks dan editor kode sumber gratis yang mendukung pengeditan tab, yaitu, bekerja dengan beberapa file terbuka dalam satu jendela.
LESS for Notepad ++ adalah file xml yang menyediakan penyorotan atau pewarnaan sintaks untuk file .less. Untuk mendapatkan informasi lebih lanjut, klik tautan ini .
Untuk menginstal Notepad ++ klik tautan ini .
Kompiler Node.js
Berikut adalah kompiler Node.js yang digunakan untuk LESS.
grunt-contrib-less
Grunt adalah pelari tugas Node. Ini akan mengkompilasi stylesheet Anda setiap kali Anda melakukan perubahan pada file LESS Anda.
merakit-kurang
assemble-less adalah plugin grunt yang kuat untuk mengkompilasi file LESS ke CSS. Tugas yang lebih sedikit menarik template JSON dan Lo - dash (garis bawah) untuk menentukan bundel LESS, komponen UI, stylesheet atau tema terkompresi.
kurangi teguk
Ini adalah plugin KURANG untuk Gulp. gulp-minify-css digunakan untuk mengecilkan CSS Anda. gulp-sourcemaps digunakan untuk menghasilkan pustaka peta sumber.
RESES
Ini adalah alat open-source yang dibangun di atas LESS dan membantu dalam mengoptimalkan kode CSS Anda. Itu membuat kode CSS bebas dari kesalahan, bersih dan dapat dikelola.
tanpa autoless
Ini adalah pengamat file .less . Ini berisi pelacakan ketergantungan dan pemberitahuan lintas platform.
Hubungkan Middleware untuk Less.js
Ini digunakan untuk memungkinkan pemrosesan untuk menghubungkan kerangka JS dari file LESS. Ini mengkompilasi file sumber berdasarkan permintaan dan menyimpan data yang dikompilasi untuk permintaan berikutnya.
Teknologi Lainnya
Berikut adalah beberapa teknologi lain yang membantu Anda menyusun kode LESS.
CLI Pelari Wro4j
Anda dapat mengunduh wro4j-runner.jar dan dapat mengkompilasi kode LESS Anda di CSS dengan menggunakan perintah berikut -