Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. LESS

Memahami LESS Loop

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called LESS: Beyond the Basics.
Creating Color Schemes with LESS Color Functions
How to Use Source Maps for Better Preprocessor Debugging

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Panduan ini, kita akan membahas pengulangan LESS secara rinci (beserta beberapa fitur LESS lain yang telah dibahas di kiriman sebelumnha, seperti Mixins Guards dan Color Functions). Pengulangan adalah fitur yang sangat membantu di LESS dan dia mengizinkan kita untuk mengotomatisasi banyak tugas.

Pengulangan dalam LESS

"Loop" adalah sebuah metode pemograman yang mengulang (atau mengiterasi) sebuah fungsi. Biasanyam dia digunakan u tuk memproses sekumpulan data. Jika kamu memiliki pengalaman dengan bahasa pemograman lainnya, kamu pasti pernah menggunakan loop sebelumnya.

Di LESS, sintaks dasarnya akan tampak seperti ini:

Kita mendefinisikan pengulangan LESS denga cara yang mirip dengan pendefinisia  Mixin Guards, tapi kali ini kita menyarangkan sebuab fungsi LESS yang akan meningkatkan paramater yang dilewatkan:  .loop( @parameters + 1 ). Tergantung skenarionya, fungsinya juga bisa berupa dekrementasi: .loop( @parameters - 1 ). Fungsi ini akan mengulang dan beriterasi sepanjang kondisi: when ( @condition ) benar

Mari lihat cara kita menggunakan loop di contoh nyata.

Daftar dan Panjang

Mari anggap kita ingin membuat sebuah kotak peringatan, jadi kita mendefinisikan stles dasarnya; beberapa padding dan border. Kita ingin membuat beberapa variasi dari kotak peringatan untuk menyalurkan jenis peringatan yang berbeda. Kamu bisa, sebagai contohnya, memiliki sebuah kotak peringatan merah untuk menunjukkan error, atau hijau untuk sukses. Dengan pengulangam, kita bisa mengatur styles nya dengan nyaman.

Untuk memulainya, atur daftar warna dan variasi nama dari kotak peringatan. Lalu, hitung variasi angka menggunakan fungsi length().

Sekarang definisikan pengulangan untuk membawa daftarnya:

Seperti yang bisa kamu lihat di atas, loop kita bernama .alert-variation, dan dia membutuhkan beberapa parameter:

  • @names : kita akan menggunakan variabel ini untuk membawa daftar dari variasi nama peringatan.
  • @colors: variabel ini akan membawa kode warna dari tiap nama di daftar @names.
  • @index: variabel ini akan membawa angka dari nama dan warna yang ada dalam daftar, dan akan lota gunakan untuk mengiterasi pengulanhan.

Kondisi

Kita juga telah mendefinisikan sebuah kondisi yang menjalankan pengulangan. Kondisi pertama hang kita atur pada contoh di atas adalah apakah nilai yang dilewatkan ke @colors adalah warna asli atau nilai asal (yang pada kasusnya kita akan menghentikan pengulangan) Kondisi berikutnya akan menghentikan pengulangan ketika penguranhan @index telah mencapai 0.

Definisi Aturan

Selanjutnya, kita mendefinisikan aturan yang membuat styles-nya.

Semenjak kita menggunakan sebuah daftar yang membawa warna kotak peringatan, kita perlu menggjnakan fungsi LESS extract() untuk mendapatkan warna yang berhubungan dan nama di tiap iterasi dari pengulangan. Lalu, menambahkan nama-nya sebagai class selector sementara warna-nya diterapkan ke border, color, dan properti background-color.

Pergi!

Kita telah siap menggunakan pengulangan-nya dengan input:

Kita memiliki sebuah daftar dari empat warna beserta daftar namanya masing-masing di variabel @names. Itwrasi dari pengulangannya akan dimulai dari nomor keempat hingga 0 karena kita mengurangi nilai @index pada tiap iterasi. Untuk tiap iterasi, pengulangannya akan menggenerasi nama class dan variasi aturan styles-nya, maka contoh ini dikompilasi menjadi:

Kamu bisa menambahkan lebih banyak ke daftarnya, dan pengulangannya akan mengompilasikan variasi baru dalam sekejap.

Kamu juga bisa menerapkan pendekatan yang mirip untuk membuat pola dari elemen UI lainnya di situsmu seperti to bol, atau (mungkin) warna merek dari situs jejaring-mu.

Membuat Sistem Grid yang Responsif

Situs-nya penuh dengan framework CSS-dan meskipun beberapa dari mereka didesain menjadi "satu ukuran yang cocok untuk semua", kenyayaannya ini tidak selalu jadi kasusnya. Cukup sering, kamu hanua membutuhkan grid responsif saja. Jadi kenapa tidak kamu buat sendiri?

Pengulanhan membuat pembuatan grid jadi tidak rumit. Berikut adalah pengulangan sederhana yang menggenerasi nama kolom class dan menentukan persentase-nya:

Perhatikan bahwa kita melakukan inkrementasi dalam sebuah pengulangan. Oleh karenanya kita mengatur kondisi pengulanganya dengan (@index =< @columns) ("ketika indexnya kurang atau sama dengan jumlah dari kolom") untuk mencegan iterasi melebihi jumlah kolom.

Gunakan pengulangan ini dengan melewatkan namanya unguk class selector yang telah digenerasi dan nomor kolom dari grid. Penamaannya terserah kami, meskioun mungkin kamu ingin mengikuti konvensi boogstrap col-sm, col-md, dan col-lg atau mungkin small, medium, large yang mengikuti pola Foundation seperti berikut:

Di sini kita menggunakan pengulanhan .grid() dan melewatkan nilai small dan 12. Yang menghasilkan berikjt:

Floating

Seperti yang bisa kamu lihat di atas, pengulangan kita saat ini menggenerasi hanya ukuran kolom. Kita juga perlu mengambangkan kolom tersebut, dan ada banyak cara untuk melakukannya. Contohnya, kita bisa menambahkan class selector seperti .column. Sematkan di bawah definisi queri @media, dan "perluas" dia ke dalam pengulangan.

Perhatikan lebih dekat dan kamu akan menemukan bahwa kita telah mendefinisikan sintaks :extend di bawah sebuah Mixin Guard. Ini akan memastikan selector .column hanya diterapkan ke kolom pertama hingga 11, karena kita berhatap kolom ke 12 akan terpampang penuh tanpa gangguan float.

Pengulangannya akan membuat output berokut ketika dikompilasi:

Kostumisasi Lebih Lanjut

Jika dibutuhkan, kamu juga bisa mengkostumisasi pengulangan unguk membuat class yang mendorong kolom ke kanan. Di Bootstrap, ini dienal dengan offsetting. Sekali lsgi, kifs tidak akan menerapkannya pada kolom ke 12 karena offsetting kolom hingga 100% tidak akan bisa dilakukan.

Pengulangan kita akan menggenerasi sepaket class baru saat dikompilasi:

Penutup

Untuk beberapa orang, ide dari pengulanhan mungkin tidak mudah untuk dipahami. Dan ini cukup normal; butuh beberapa waktu bagi saya intuk memajamk apa hang dilakukan dengan pengulangan. Semova panduan ini akan memberimu permulaan yang bagus. Di sini kita telah menunjukkan cara menggenerasi pola antarmuka secara cepat. Kita juha telah belajar cara membuat sistem grid kita sehingga kita bisa lebih sadar ke styles dari situs kita ketimbang secara buta menambahkan kode dengan framework yang kita tidak butuhkan.

Jangan ragu untuk membaca panduan ini beberapa kali untuk menemukan cara memanfaatkan pengulangan dan membuat CSS style-mu lebih efisien.

Sumber Lebih Lanjut

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.