Apa itu CSS Lebih Sedikit dan Bagaimana Anda Menggunakannya?

Jika Anda seorang pengembang CSS yang berpengalaman, Anda akan sangat menyadari kelemahan bahasa tersebut. Itu masih kekurangan dukungan luas untuk fitur yang sudah lama diminta seperti nesting dan mixin.

Less (Leaner Style Sheets) adalah perpanjangan dari CSS dengan banyak fitur canggih. Jika Anda mengetahui CSS, maka mempelajari Less itu mudah karena sintaks Less sangat mirip.

Cara Menginstal Lebih Sedikit

Anda dapat menginstal Less dengan Pengelola Paket JavaScript, NPM dengan menjalankan:

npm instal lebih sedikit -g

Setelah instalasi, Anda dapat mengkompilasi .lebih sedikit file ke .css menggunakan kurangc memerintah. Misalnya, perintah berikut mengkompilasi style.less dan mengeluarkan hasilnya dalam a style.css mengajukan.

lessc gaya.kurang gaya.css

Variabel dalam Kurang

Tidak seperti CSS reguler, yang menggunakan operator "--" untuk mendefinisikan variabel, Less mendefinisikan variabel menggunakan simbol "@". Misalnya:

@lebar:40px;
@tinggi:80px;

Blok kode hanya membuat dua variabel, lebar dan tinggi yang menyimpan dua nilai masing-masing: 40px dan 80px. Ini adalah praktik umum untuk mengambil nilai yang biasa digunakan dalam CSS dan menyimpannya dalam sebuah variabel. Ini membuatnya lebih mudah untuk memodifikasi nilai-nilai tersebut karena hanya ada satu sumber kontrol.

Inilah cara Anda dapat menggunakan variabel dalam Less. Buat sebuah index.htm file dan tambahkan kode boilerplate berikut:

html>
<htmllang="en">
<kepala>
<metacharset="UTF-8">
<metahttp-setara="Kompatibel dengan X-UA"isi="IE = tepi">
<metanama="area pandang"isi="width=device-width, initial-scale=1.0">
<tautanrel="lembar gaya"href="style.css">
<judul>Menggunakan Lebih Sedikit CSSjudul>
kepala>
<tubuh>
<div>
 Halo dari anak-anak planet Bumi!
div>
tubuh>
html>

Selanjutnya, buat a style.less file dan tambahkan berikut ini:

@lebar:400px;
@tinggi:400px;
@vertikal-pusat: tengah;
@txt-putih: putih;
@bg-merah: rgb(220, 11, 11);
@font-40:40px;
div {
lebar: @lebar;
tinggi: @tinggi;
menampilkan: melenturkan;
warna: @txt-putih;
warna latar belakang: @ bg-merah;
ukuran huruf: @font-40;
}

Sekarang, ketika Anda dapat mengkompilasi file .lebih sedikit mengajukan ke .css menggunakan kurangc memerintah:

lessc gaya.kurang gaya.css

CSS yang dikompilasi akan terlihat seperti ini:

div {
lebar: 400px;
tinggi: 400px;
menampilkan: melenturkan;
warna: putih;
warna latar belakang: #dc0b0b;
ukuran huruf: 40px;
}

Ketika Anda membuka browser Anda, inilah yang akan Anda lihat:

Masih banyak lagi yang dapat Anda lakukan dengan variabel di Less, seperti interpolasi yang memungkinkan Anda menggunakan variabel sebagai nama pemilih, URL, dan lainnya. Berikut adalah contoh bagaimana menerapkan interpolasi variabel:

@pemilih-kustom: wadah;
.@{pemilih-kustom} {
lapisan: 10px;
batas: 10px;
berbatasan: padat 10px;
}

Blok kode di atas menggunakan @{...} klausa untuk menggunakan variabel sebagai pemilih. Ketika dikompilasi, kode akan menghasilkan yang berikut:

.wadah{
lapisan: 10px;
batas: 10px;
berbatasan: padat 10px;
}

Operasi Aritmatika dalam Kurang

Kurang juga menyediakan dukungan untuk operasi aritmatika seperti penjumlahan, pengurangan, pembagian, dan perkalian. Operasi ini bekerja dengan konstanta, nilai, dan variabel.

@ variabel-1:5px;
// Perkalian Operasi antara variabel dan konstanta
@ variabel-2:@ variabel-1 * 2
// Operasi penjumlahan antara nilai dan variabel.
@ variabel-3:10px + @ variabel-2

Cara Menggunakan Mixin

Mixins memungkinkan Anda menggunakan kembali gaya (atau kode CSS) di seluruh lembar gaya. Lainnya Ekstensi CSS seperti Sass juga menawarkan Mixin. Untuk mengilustrasikan cara kerja mixin di Less, buat index.htm dan tambahkan kode berikut:

html>
<htmllang="en">
<kepala>
<metacharset="UTF-8">
<metahttp-setara="Kompatibel dengan X-UA"isi="IE = tepi">
<metanama="area pandang"isi="width=device-width, initial-scale=1.0">
<tautanrel="lembar gaya"href="style.css">
<judul>Menggunakan Lebih Sedikit CSSjudul>
kepala>
<tubuh>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elite. Soluta
 Architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 kesedihan! Bersiaplah untuk pekerjaan lain dan duduk, anggap saja sebagai hal yang baik
 facilis undesequi.
div>
<P>
 Lorem ipsum dolor sit amet, consectetur adipisicing elite. Soluta
 Architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 kesedihan! Bersiaplah untuk pekerjaan lain dan duduk, anggap saja sebagai hal yang baik
 facilis undesequi.
P>
<P>
 Lorem ipsum dolor sit amet, consectetur adipisicing elite. Soluta
 Architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 kesedihan! Bersiaplah untuk pekerjaan lain dan duduk, anggap saja sebagai hal yang baik
 facilis undesequi.
P>
tubuh>
html>

Selanjutnya, buat a style.less file dan tambahkan baris berikut:

.contoh teks() {
warna latar belakang: kuning;
}
.surat pertama() {
warna latar belakang: merah;
warna: putih;
ukuran huruf: 30px;
}
P {
.contoh teks();
}
P::surat pertama {
.surat pertama();
}

Di blok kode di atas, ada dua kelas mixin: .contoh teks Dan .surat pertama. Saat Anda ingin menggunakan mixin di bagian lain dari style sheet, cukup rujuk dengan nama dengan tanda kurung di bagian akhir: .mixin(). Di browser, Anda akan melihat sesuatu seperti ini:

Gaya Bersarang dalam Lebih Sedikit

Katakanlah Anda memiliki div induk dengan dua elemen sebagai anaknya: a P elemen dan lainnya div. Biasanya, jika Anda ingin bergaya P elemen dengan warna merah dan div elemen dengan warna hijau, Anda bisa menggunakan pendekatan berikut:

divP {
warna: merah;
}
div {
warna: hijau
}

Less menyediakan fungsionalitas serupa melalui penggunaan bersarang. Jadi dalam hal ini, persamaan Kurang dari blok kode di atas adalah:

div {
warna: hijau;
P {
warna: merah;
 }
}

Tidak hanya lebih mudah untuk membungkus kepala Anda, ini juga membuat kode lebih mudah dipelihara. Mereferensikan pemilih induk dengan lebih sedikit lebih mudah dengan & operator. Misalnya:

tombol {
warna latar belakang: biru;
berbatasan: tidak ada;
&:arahkan {
warna latar belakang: abu-abu;
mengubah: skala(1.2);
 }
}

Blok kode di atas akan menghasilkan kode CSS berikut saat dikompilasi:

tombol {
warna latar belakang: biru;
berbatasan: tidak ada;
}
tombol:arahkan {
warna latar belakang: abu-abu;
mengubah: skala(1.2);
}

Memahami Ruang Lingkup dan Fungsi dalam Lebih Sedikit

Seperti bahasa pemrograman biasa, variabel memiliki ruang lingkup blok tempat Anda mendefinisikannya. Untuk mengilustrasikan ini, buat yang baru index.htm file, dan tambahkan kode boilerplate HTML pertama yang disediakan sebelumnya. Kemudian tambahkan blok berikut di file tubuh menandai:

<divkelas="div luar">
 Div Luar harus berwarna merah.
<br />
<menjangkaukelas="inner-div">
 Div bagian dalam harus berwarna hijau.
menjangkau>
div>

Dalam style.less file, tambahkan baris berikut:

@bg-warna: merah;
tubuh {
ukuran huruf: 40px;
warna: putih;
batas: 20px;
}
.inner-div {
@bg-warna: hijau;
warna latar belakang: @bg-warna;
}
.outer-div {
warna latar belakang: @bg-warna;
}

Itu inner-div blok mendefinisikan ulang bg-color variabel, hanya terbatas pada blok itu. Jadi warna hijau hanya berlaku untuk kelas tersebut dan tidak mempengaruhi global bg-color variabel. Saat Anda mengompilasi dan membuka hasilnya di browser, inilah yang akan Anda lihat:

Less juga menyediakan fungsi praktis yang dapat bermanfaat dalam beberapa skenario. Misalnya, jika Anda ingin menyetel gaya hanya jika kondisi tertentu terpenuhi, Anda dapat melakukannya dengan jika fungsi. Fungsi ini memiliki sintaks berikut:

jika((kondisi), nilai1, nilai2)

Kode kembali nilai1 jika kondisi terpenuhi dan nilai2 jika tidak. Ini contohnya:

@var1:20px;
@var2:20px;
div {
lapisan: jika((@var1 = @var2), 10px, 20px);
}

Blok kode di atas akan menghasilkan CSS berikut saat dikompilasi:

div {
lapisan: 10px;
}

Lakukan Lebih Banyak Dengan Lebih Sedikit dan Ekstensi CSS Lainnya

Ribuan pengembang menggunakan Less untuk membuat penulisan CSS sedikit menyenangkan. Fitur luar biasa seperti fungsi, mixin, dan variabel hanyalah sebagian kecil dari penawaran Less.

Kurang cocok untuk proyek kecil dan besar. Perlu dicatat bahwa bahasa ekstensi CSS lain yang sama menakjubkannya seperti Sass dan Stylus CSS patut untuk dicoba.