Belajar LESS : Pengenalan Part 3 - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Belajar LESS : Pengenalan Part 3, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel less, Artikel Pemrograman Web, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Belajar LESS : Pengenalan Part 3
link : Belajar LESS : Pengenalan Part 3

Baca juga


Belajar LESS : Pengenalan Part 3

Ini merupakan lanjutan dari Pengenalan Less Part 2, di part sebelumnya telah dibahas tentang Variabel, Mixin dan parameternya, serta operasi. pada part ini akan dibahas mengenai fungsi warna, nested rule serta cara mengimpor file LESS, langsung saja ke topiknya.

Fungsi Warna

LESS menyediakan beberapa fungsi warna berikut ini:
  1. darken() dan lighten(), digunakan untuk menambahkan warna hitam dan putih (lebih gelap dan lebih terang)
  2. saturate() dan desaturate(), untuk menentukan sebuah warna lebih "berwarna" atau "grayscale"
  3. fadein() dan fadeout(), untuk menambah atau mengurangi transparansi
  4. spin(), digunakan untuk memodifikasi rona (hue) warna
Jika, misal, kita ingin membuat warna garis pinggir (border color) menjadi desaturasi untuk mendapatkan warna yang mendekati grayscale, maka kita bisa menggunakan desaturate seperti dibawah ini:

@WarnaGaris: desaturate(@WarnaTiga, 100%);

Bahkan kita bisa memanfaatkan output dari hasil operasi suatu warna kedalam operasi warna lainnya, seperti dibawah ini:

@WarnaGaris: darken(desaturate(@WarnaTiga, 100%),20%;

Semua operasi warna bisa menggunakan warna (Hex) atau persentase sebagai parameternya, kecuali spin. spin menggunakan bilangan bulat (integer) antara 0 sampai dengan 255 dan tidak menggunakan persentase untuk memodifikasi rona (hue) warna, misal:

@WarnaGaris: spin(@WarnaTiga, 100);

Nested Rule

Ketika kita merancang suatu halaman web yang kompleks menggunakan CSS, kadang kita akan dihadapkan pada seleksi berantai (atau ada yang menyebutnya parent child, ada yang menyebutnya pewarisan) untuk elemen tertentu dalam DOM. Nested Rule didalam LESS digunakan untuk menyederhanakan penulisan nama selektor yang panjang menjadi lebih sederhana dan mudah. Didalam LESS kita bisa menempatkan suatu selektor didalam selektor lainnya. Hal ini membuat pewarisan (nest) menjadi lebih jelas dan lebih pendek. Dibawah ini contoh pewarisan atau pengelompokan CSS standar:

#header {
      border-width: 1px
}
#header h1 {
      font-size: 20px;
      font-weight: bold;
      color: #ddd
}
#header h1 a {
     text-decoration: none;
}
#header h1 a:hover {
     color: #dfe

     border-width: 2px
}

Perhatikan contoh kode penulisan CSS standar diatas. Sebenarnya ketika kita menuliskan turunan selektor yang hanya satu atau dua turunan, hal ini masih dipahami dan mengerti dengan baik. Namun ketika jumlah selektor turunan dari selektor utama sudah mencapai 4 sampai 5 selektor, masalah sudah mulai bermunculan, dari mulai penulisan yang lebih panjang, dan visualisasi penyusunan hirarki yang tidak nyaman dilihat alias berantakan. Dengan LESS kita dengan mudah menuliskan pengelompokan utama dan kemudian menuliskan turunannya didalam kelompok utama. Misal, kode contoh diatas kita modifikasi menjadi aturan pewarisan LESS dengan meniru struktur DOM, sehingga menjadi seperti dibawah ini;

#header {
     border-width: 1px;
     h1 {
        font-size: 20px;
        font-weight: bold;
        color: #ddd;
        a {

            text-decoration: none;
            &:hover {
                color: #dfe;
            }
        }
    }
}

Jika kita perhatikan contoh kode aturan pengelompokan LESS diatas, ada satu bagian yang berbeda dalam penulisan pseudo-class. Untuk penulisan pseudo-class kita menggunakan simbol "&" yang bisa berarti "ini" atau "dan".


Namun, Nested Rule untuk preprocessor LESS berefek pada kenyamanan penulisan sintak didalam teks editor. Ketika saya mulai menuliskan sintak-sintak CSS dengan prepocessor LESS, hampir semua teks editor yang digunakan tidak mampu menampilkan visualisasi syntax-highlighter yang nyaman untuk diperhatikan, terutama dari sisi pewarnaan sintak, saya bahkan merasa pewarna sintak LESS sangat kacau ketika menggunakan pseudo-class. Ini menjadi perkerjaan rumah para pengembang plugin teks editor untuk menciptakan syntax-highlighter khusus preprocessor LESS.

Mengimpor File LESS

Akhirnya, ini biasanya dilakukan sebagai langkah terakhir yaitu dengan mengimpor file LESS. Membagi file-file LESS sesuai dengan penggolongan tertentu adalah cara terbaik dari pada Anda harus menuliskannya hingga 5000 baris dalam satu file.
Mengimpor satu file ke file lainnya didalam LESS sangatlah sederhana, yaitu:

@import "warna.less";

Bahkan kita dapat menghilangkan ekstensi LESS dengan hanya menuliskan:

@import "warna";

Kita dapat membagi-bagi file LESS sesuai relevansinya menjadi beberapa file terpisah. Mungkin kita bisa saja menggolongkan file-file LESS itu menjadi seperti dibawah ini:
  • CSS Reset atau Normalize
  • Warna
  • Huruf dan tipografi
  • Elemen-elemen UI
  • Style utama halaman
  • ...dan pengelompokan lain secara relevan sesuai aturan yang tergantung pada proyek Anda
Sebagai contoh, anda dapat melihat bagaimana developer Twitter Bootstrap membagi-bagi file LESS kedalam beberapa file sesuai kelompoknya. Hal seperti ini akan terlihat lebih profesional dan lebih mudah dalam pengelolaan.
Anda mungkin berfikir bahwa menggunakan metode impor justru akan meningkatkan HTTP Request yang tidak perlu sehingga akan memperlambat waktu load halaman anda, dan itu betul! Namun kita harus ingat bahwa yang akan kita gunakan adalah file LESS sebagai bahan mentah yang kemudian dikonversi sehingga menjadi file CSS biasa. Jika kita memahami dengan baik, maka tidak peduli lagi, akan seberapa banyak file-file LESS itu digolongkan dan dipisahkan, karena pada akhirnya, semua bagian-bagian file LESS tersebut akan digabungkan menjadi satu file CSS baru melalui impor. Jadi, jangan takut melakukan impor. Karena hal ini akan sangat membantu kita dalam penyusunan struktur kode pada proyek yang sedang kita kerjakan.
Mungkin hanya itu saja Penjelasan tentang LESS, mulai dari part 1 sampai part 3 ini. Kurang lebihnya saya mohon maaf, wassalam.


Demikianlah Artikel Belajar LESS : Pengenalan Part 3

Sekianlah artikel Belajar LESS : Pengenalan Part 3 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Belajar LESS : Pengenalan Part 3 dengan alamat link https://dev-create.blogspot.com/2019/12/belajar-less-pengenalan-part-3.html