Merangkul Sass: Mengapa Anda Harus Berhenti Menggunakan Vanilla CSS

Ketika saya pertama kali mendengar tentang Sass dan praprosesor CSS lainnya, pikiran saya sebenarnya tidak begitu antusias. “Mengapa kita membutuhkan alat lain untuk sesuatu yang sudah bekerja seindah CSS?”. "Saya tidak akan menggunakan itu". "CSS saya cukup dipesan untuk tidak membutuhkannya". “Preprocessor adalah untuk orang yang tidak tahu cara menulis CSS, jika Anda tahu cara menulis CSS, Anda tidak memerlukan preprocessor”. “Bagaimanapun, prosesor adalah untuk orang yang tidak tahu cara menulis CSS. Jika mereka melakukannya, mereka tidak membutuhkan preprocessor”. Dan saya benar-benar menghindarinya untuk sementara waktu, sampai saya terpaksa menggunakannya di beberapa proyek.

Saya tidak menyadari betapa saya menikmati bekerja dengan Sass sampai baru-baru ini, ketika saya harus beralih kembali ke vanilla CSS dalam sebuah proyek. Selama waktu itu, saya belajar banyak sehingga saya memutuskan untuk memuji Sass dan menjadikan ini dunia yang lebih baik, dan membuat Anda menjadi orang yang lebih bahagia!

Mengapa Tetap Menggunakan Sass?

Organisasi: @import

Proyek yang baru saja saya sebutkan ini, sebuah situs web e-niaga besar, memiliki satu file CSS dengan 7184 baris deklarasi gaya yang tidak terkompresi. Ya, Anda membacanya dengan benar: tujuh ribu seratus delapan puluh empat baris CSS. Saya yakin ini bukan file CSS terbesar yang harus ditangani pengembang front-end di industri ini, tapi itu cukup besar untuk menjadi kekacauan total.

Ini adalah alasan pertama mengapa Anda membutuhkan Sass: ini membantu Anda mengatur dan memodulasi stylesheet Anda. Ini bukan variabel, itu tidak bersarang. Bagi saya, fitur utama Sass adalah parsial dan bagaimana ia memperluas aturan @import CSS untuk mengizinkannya mengimpor file SCSS dan Sass. Dalam praktiknya, ini berarti Anda akan dapat membagi file style.css yang besar menjadi beberapa file yang lebih kecil yang akan lebih mudah untuk dipelihara, dipahami, dan diatur.

Aturan @import telah ada hampir selama CSS itu sendiri. Namun, itu mendapatkan ketenaran yang buruk karena ketika Anda menggunakan @import di file CSS Anda, Anda memicu permintaan HTTP terpisah, satu untuk setiap file CSS yang Anda impor. Ini dapat merusak kinerja situs Anda. Jadi apa yang terjadi apa yang Anda gunakan dengan Sass? Jika Anda tidak pernah berhenti memikirkan apa arti kata “preprocessor”, sekaranglah saatnya.

Preprocessor adalah program yang memproses data inputnya untuk menghasilkan output yang digunakan sebagai input untuk program lain. —Wikipedia

Jadi, kembali ke aturan @import kami, ini berarti bahwa @import akan ditangani oleh Sass dan semua file CSS dan SCSS kami akan dikompilasi ke satu file yang akan berakhir di situs langsung kami. Pengguna hanya perlu membuat satu permintaan dan akan mengunduh satu file, sementara struktur proyek Anda dapat terdiri dari ratusan file termodulasi. Seperti inilah tampilan style.scss dari proyek Sass biasa:

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

Jangan Ulangi Diri Anda: Variabel

Setiap artikel yang memuji Sass mungkin akan mulai dengan menyebutkan fitur bintangnya - variabel. Penggunaan variabel yang paling umum adalah palet warna. Berapa kali Anda menemukan beberapa deklarasi dari apa yang seharusnya memiliki warna yang sama, berakhir di CSS sebagai nuansa yang sedikit berbeda karena tidak ada yang menggunakan kode hex yang sama? Sas untuk menyelamatkan. Di Sass, Anda dapat mendeklarasikan variabel dengan hampir semua nilai. Jadi, palet warna kita bisa seperti:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

Kata-kata yang dimulai dengan "$" adalah variabel Sass. Artinya, nanti di lembar gaya Anda, Anda akan dapat menggunakan kata-kata itu, dan kata-kata itu akan dipetakan ke nilai yang Anda tetapkan sebelumnya:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Bayangkan bagaimana ini dapat mengubah 7184 baris kode CSS kami, dan Anda mungkin mulai menginginkan Sass sekarang. Lebih baik lagi, bayangkan ada desain ulang merek dan Anda perlu memperbarui semua warna di CSS Anda. Dengan Sass, satu-satunya hal yang perlu Anda lakukan adalah memperbarui deklarasi variabel tersebut satu kali, dan baam! Perubahan akan ada di sekitar stylesheet Anda.

Saya mengkodekan contoh ini di Sassmeister, taman bermain Sass. Jadi lanjutkan dan coba ubah variabel-variabel itu ke yang lain.

Kegunaan variabel tidak hanya terbatas pada warna, tetapi deklarasi font, ukuran, kueri media, dan lainnya. Ini adalah contoh yang sangat mendasar untuk memberi Anda ide, tetapi percayalah, kemungkinan dengan Sass tidak terbatas.

Kode Sumber Pembersih: Bersarang

Bersarang mungkin merupakan fitur Sass yang paling banyak disebutkan kedua. Ketika saya kembali ke Vanilla CSS setelah menggunakan Sass, file CSS yang saya lihat tampak sangat berantakan sehingga saya tidak yakin apakah itu diperkecil. Tanpa bersarang, vanilla CSS tidak terlihat lebih baik daripada file .min.css yang dicetak cantik:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

Dengan Nesting, Anda dapat menambahkan kelas di antara kurung kurawal deklarasi. Sass akan mengkompilasi dan menangani penyeleksi dengan cukup intuitif. Anda bahkan dapat menggunakan karakter “&” untuk mendapatkan referensi dari pemilih induk. Kembali ke contoh CSS kita, kita dapat mengubahnya menjadi:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

Itu terlihat indah dan lebih mudah dibaca. Jangan ragu untuk bermain dengan contoh ini.

Lagi! Jangan Ulangi Diri Anda: Mixin dan Extends

Pengulangan dalam CSS selalu sulit untuk dihindari. Dan tidak ada salahnya untuk sedikit menekankan hal ini, terutama ketika Sass memberi Anda mixin dan ekstensi. Keduanya adalah fitur yang kuat dan membantu menghindari banyak pengulangan. Kemungkinan dengan mixin dan ekstensi sepertinya tidak ada habisnya. Dengan mixin, Anda dapat membuat deklarasi CSS berparameter dan menggunakannya kembali di seluruh stylesheet Anda.

Misalnya, Anda memiliki modul kotak dengan tombol di dalamnya. Anda ingin batas kotak dan latar belakang tombol memiliki warna yang sama. Dengan vanilla CSS, Anda melakukan sesuatu seperti:

 .box { border: 2px solid red; } .box .button { background: red; }

Katakanlah Anda sekarang menginginkan modul kotak yang sama, tetapi dengan warna yang berbeda. Anda akan menambahkan sesuatu seperti ini ke CSS Anda:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Sekarang, katakanlah Anda menginginkan modul kotak, tetapi dengan batas yang lebih tipis. Anda akan menambahkan:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Banyak pengulangan ya? Dengan Sass Anda dapat mengabstraksi kasus-kasus ini untuk mengurangi pengulangan. Anda dapat mendefinisikan mixin seperti ini:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

Jadi, kode sumber Anda dapat direduksi menjadi:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

Terlihat cantik, bukan? Bermain-main dengan contoh ini. Anda dapat membuat perpustakaan mixin Anda sendiri, atau bahkan lebih baik lagi, Anda dapat menggunakan salah satu perpustakaan komunitas di luar sana.

Ekstensi serupa, memungkinkan Anda berbagi properti dari satu pemilih ke pemilih lainnya. Namun, alih-alih mengeluarkan beberapa deklarasi, mereka menampilkan daftar kelas tanpa mengulangi properti Anda. Dengan cara ini Anda dapat menghindari pengulangan kode dalam output Anda juga. Mari kita lupakan tombol pada contoh sebelumnya dan lihat bagaimana @extend akan bekerja dengan .boxes .

Katakanlah Anda mendeklarasikan kotak pertama:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

Sekarang Anda menginginkan dua kotak yang mirip dengan yang ini, tetapi dengan warna batas yang berbeda. Anda dapat melakukan sesuatu seperti:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

Ini adalah bagaimana CSS yang dikompilasi akan terlihat seperti:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Kuat, kan? Anda dapat menemukan contohnya di sini. Jika Anda meninjau CSS yang dihasilkan, Anda akan menyadari bahwa kelas .box disertakan dalam output. Jika Anda tidak menginginkan perilaku ini, Anda dapat menggabungkan @extend dengan "placeholder". Placeholder adalah pemilih khusus yang tidak akan menampilkan kelas di CSS. Misalnya, terkadang saya sering mengatur ulang gaya default daftar. Saya biasanya menggunakan @extend dengan placeholder seperti ini:

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

Anda kemudian dapat menggunakan kembali pola ini di semua lembar gaya Anda:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

CSS terkompilasi Anda akan terlihat seperti:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Lihat contohnya di sini.

Apakah Ada Lagi?

Sangat! Saya tidak ingin memperumit artikel ini, tetapi ada dunia Sassy yang menunggu untuk ditemukan oleh Anda; dan ada juga banyak fitur di luar itu: operasi, komentar satu baris dengan //, fungsi, jika loop ... jika Anda pernah berpikir "akan sangat bagus untuk melakukan beberapa hal 'X' dengan CSS", saya yakin hal 'X' itu sudah dilakukan oleh Sass. "CSS dengan kekuatan super" adalah tagline-nya, dan itu tidak mungkin lebih mendekati kebenaran.

Kesimpulan

Pergi dan kunjungi halaman instal dan mulailah meretas! Percayalah, Anda tidak akan menyesalinya.

Ya, ada beberapa alternatif untuk Sass. Praprosesor lainnya (KURANG, Stylus), pascaprosesor, Grunt, dll. Bahkan ada Variabel CSS. Saya tidak mengatakan bahwa Sass adalah satu-satunya teknologi di luar sana. Semua saya katakan adalah bahwa itu yang terbaik! Setidaknya untuk sekarang. Tidak percaya dengan apa yang saya katakan? Silakan dan coba sendiri. Anda tidak akan menyesal!