CSS Preprocessors Dijelaskan

CSS Preprocessors semakin menjadi andalan dalam alur kerja pengembang web front end. CSS adalah bahasa yang sangat rumit dan bernuansa, dan dalam upaya untuk membuatnya lebih mudah digunakan, pengembang sering kali menggunakan preprocessor seperti SASS atau LESS.

CSS Preprocessors mengkompilasi kode yang ditulis dengan menggunakan compiler khusus. Mereka kemudian menggunakannya untuk membuat file CSS, yang kemudian dapat direferensikan oleh dokumen HTML utama.

Saat menggunakan CSS Preprocessor, Anda akan dapat memprogram dalam CSS normal seperti yang Anda lakukan jika preprocessor tidak ada. Hal baiknya adalah Anda juga memiliki lebih banyak opsi yang tersedia untuk Anda. Beberapa, seperti SASS, memiliki standar gaya khusus yang dimaksudkan untuk mempermudah penulisan dokumen, seperti kebebasan untuk menghilangkan tanda kurung jika Anda mau.

Tentu saja, CSS Preprocessors juga menawarkan fitur lain. Banyak fitur yang ditawarkan sangat mirip di seluruh praprosesor, dengan hanya sedikit variasi dalam sintaks. Dengan demikian, Anda dapat memilih hampir semua yang Anda inginkan, dan Anda akan dapat mencapai hal yang sama. Beberapa fitur yang lebih berguna adalah:

Variabel

Salah satu item yang paling umum digunakan dalam bahasa pemrograman apa pun adalah variabel, sesuatu yang sangat tidak dimiliki CSS. Dengan memiliki variabel yang Anda inginkan, Anda dapat menentukan nilai satu kali, dan menggunakannya kembali jika di seluruh program. Contoh dari ini di SASS adalah:

$yourcolor: #000056 .yourDiv { color: $yourcolor; }

Dengan mendeklarasikan SASS yourcolorvariabel satu kali, sekarang dimungkinkan untuk menggunakan kembali warna yang sama persis di seluruh dokumen tanpa harus mengetik ulang definisi.

Loop

Item umum lainnya dalam bahasa adalah loop, hal lain yang tidak dimiliki CSS. Loop dapat digunakan untuk mengulangi instruksi yang sama beberapa kali tanpa harus masuk kembali beberapa kali. Contoh dengan SASS adalah:

@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }

Perulangan ini menyelamatkan kita dari keharusan untuk menulis kode yang sama beberapa kali untuk mengubah ukuran margin.

Pernyataan If / Else

Namun fitur lain yang tidak dimiliki CSS adalah pernyataan If / Else. Ini akan menjalankan sekumpulan instruksi hanya jika kondisi yang diberikan benar. Contoh dari ini di SASS adalah:

@if width(body) > 500px { background color: blue; } else { background color: white; }

Di sini, warna latar belakang akan berubah warna bergantung pada lebar badan halaman.

Ini hanyalah beberapa dari fungsi utama CSS Preprocessors. Seperti yang Anda lihat, CSS Preprocessor adalah alat yang sangat berguna dan serbaguna. Banyak pengembang web menggunakannya, dan sangat disarankan untuk mempelajari setidaknya salah satunya.

Informasi Lebih Lanjut:

  • Tutorial CSS terbaik
  • Dokumentasi SASS: //sass-lang.com/
  • SASS, preprocessor untuk hiasan web Anda
  • LESS docs: //lesscss.org/
  • Dokumen Stylus: //stylus-lang.com/