Panduan Sederhana Dan Mudah Untuk Memahami Sass
Beberapa waktu yang lalu Thoriq Firdaus menulis artikel yang bagus tentang memulai dengan Sass yang menunjukkan kepada Anda cara menginstal dan menggunakan bahasa preprosesor CSS yang sangat berguna ini (Anda mungkin ingin memeriksanya, Anda tahu, untuk memulai).
Pada artikel ini saya pikir saya akan memberi Anda sedikit lebih banyak wawasan tentang apa yang dapat Anda lakukan dengan Sass dan bagaimana pengembang menggunakannya setiap hari untuk membuat kode CSS modular yang lebih baik dan lebih modular. Lewati ke bagian yang Anda inginkan:
- Alat Perdagangan
- Variabel
- Bersarang
- Memperluas Aturan
- Mixin
- Pemilih Placeholder
- Operasi
- Fungsi
Alat-Alat Perdagangan
Thoriq menunjukkan kepada Anda bagaimana Anda dapat menggunakan Sass dari baris perintah menggunakan sass --watch perintah.
Jika Anda lebih suka alat GUI, Anda bisa menggunakan aplikasi favorit pribadi saya, Codekit, alat pengembang web untuk mengkompilasi Sass, menggabungkan, memperbaiki sendiri dan banyak lagi. Prepros adalah aplikasi lain yang sangat mampu yang dapat digunakan pada semua sistem. Keduanya aplikasi berbayar tetapi sangat berharga jika Anda akan menggunakannya dalam jangka panjang.
Jika Anda hanya ingin mencoba Sass tanpa membayar apa pun Anda dapat menggunakan terminal, atau Koala (berikut ulasan kami), aplikasi kaya fitur lintas platform gratis, yang dapat bertahan melawan rekan-rekan premium.
Variabel
Salah satu hal pertama yang perlu Anda perhatikan adalah variabel. Jika Anda berasal dari PHP atau latar belakang bahasa pengkodean serupa lainnya, ini akan menjadi kebiasaan Anda. Variabel adalah untuk menyimpan sedikit demi sedikit informasi yang dapat digunakan kembali, seperti nilai warna misalnya:
$ primary_color: # 666666; . tombol warna: $ primary_color; .important color: $ primary_color;
Ini mungkin tidak begitu berguna di sini, tetapi bayangkan memiliki 3.000 baris kode. Jika skema warna Anda berubah, Anda harus mengganti setiap nilai warna dalam CSS. Dengan Sass Anda bisa saja ubah nilainya dari $ primary_color variabel dan dilakukan dengan itu.
Variabel digunakan untuk menyimpan nama font, ukuran, warna, dan sejumlah informasi lainnya. Untuk proyek yang lebih besar, mungkin kita perlu mengekstraksi semua variabel Anda ke file yang terpisah (kami akan melihat bagaimana ini dilakukan segera). Apa yang memungkinkan Anda lakukan adalah mewarnai ulang seluruh proyek Anda dan mengubah font serta aspek-aspek penting lainnya tanpa pernah menyentuh aturan CSS yang sebenarnya. Yang perlu Anda lakukan adalah memodifikasi beberapa variabel.
Bersarang
Fitur dasar lain yang diberikan Sass kepada Anda adalah kemampuan untuk aturan sarang. Mari kita asumsikan bahwa Anda sedang membangun menu navigasi. Anda memiliki nav elemen yang berisi daftar tidak berurutan, daftar item, dan tautan. Di CSS Anda dapat melakukan sesuatu seperti ini:
#header nav / * Aturan untuk area nav * / #header nav ul / * Aturan untuk menu * / #header nav li / * Aturan untuk item daftar * / # header nav a / * Aturan untuk tautan * /
Pada penyeleksi, kami banyak mengulangi. Jika elemen memiliki akar yang sama, kita dapat menggunakan nesting tulis aturan kami dengan cara yang jauh lebih bersih.
Begini cara kode di atas terlihat di Sass:
#header nav / * Aturan untuk area nav * / ul / * Aturan untuk menu * / li / * Aturan untuk daftar item * / a / * Aturan untuk tautan * /
Bersarang sangat berguna karena itu membuat stylesheet (banyak) lebih mudah dibaca. Dengan menggunakan sarang bersama dengan lekukan yang tepat dapat Anda capai struktur kode yang sangat mudah dibaca, bahkan jika Anda memiliki jumlah kode yang adil.
Salah satu kelemahan dari bersarang adalah ia bisa menyebabkan kekhususan yang tidak perlu. Pada contoh di atas saya telah merujuk ke tautan dengan #header nav a. Anda juga bisa menggunakannya #header nav ul li a yang mungkin terlalu banyak.
Di Sass, jauh lebih mudah untuk menjadi sangat spesifik karena yang perlu Anda lakukan hanyalah membuat aturan. Berikut ini jauh lebih mudah dibaca dan cukup spesifik.
#header nav / * Aturan untuk area nav * / ul / * Aturan untuk menu * / li / * Aturan untuk daftar item * / a / * Aturan untuk tautan * /
Memperluas Aturan
Memperluas akan terbiasa jika Anda telah bekerja dengan bahasa berorientasi objek. Paling baik dipahami melalui contoh, mari kita buat 3 tombol yang sedikit variasi satu sama lain.
.tombol display: inline-block; warna: # 000; latar belakang: # 333; batas-jari-jari: 4px; padding: 8px 11px; .button-primary @extend .button; latar belakang: # 0091C2. tombol-kecil @extend .button; ukuran font: 0.9em; padding: 3px 8px;
Itu .tombol-utama dan .tombol-kecil semua kelas memperpanjang .tombol kelas yang berarti bahwa mereka mengambil semua propertinya dan kemudian mendefinisikan sendiri.
Ini sangat berguna dalam banyak situasi di mana variasi elemen dapat digunakan. Pesan (peringatan / keberhasilan / kesalahan), tombol (warna, ukuran), jenis menu dan sebagainya semuanya dapat menggunakan fungsionalitas perluasan untuk efisiensi CSS yang luar biasa.
Satu peringatan meluas adalah itu mereka tidak akan bekerja di permintaan media seperti yang Anda harapkan. Ini sedikit lebih maju tetapi Anda dapat membaca semua tentang perilaku ini di Memahami Seleksi Tempat Penampung - penyeleksi tempat penampung adalah jenis perpanjangan khusus yang akan kita bicarakan segera.
Mixin
Mixin adalah fitur favorit pengguna preprosesor lainnya. Mixin adalah aturan yang dapat digunakan kembali - sempurna untuk aturan khusus vendor atau untuk menetapkan aturan panjang CSS.
Bagaimana dengan membuat aturan transisi untuk elemen hover:
@mixing hover-effect -webkit-transition: background-color 200ms; -moz-transisi: latar belakang-warna 200ms; -o-transisi: latar belakang-warna 200ms; transisi: warna latar belakang 200ms; a @sertakan efek hover; . tombol @include hover-effect;
Mixin juga memungkinkan Anda untuk menggunakan variabel tentukan nilai dalam mixin. Kita dapat menulis ulang contoh di atas menjadi memberi kami kendali atas waktu transisi yang tepat. Kami mungkin ingin tombol untuk transisi sedikit lebih lambat misalnya.
@mixin hover-effect ($ speed) -webkit-transition: background-color $ speed; -moz-transisi: warna latar belakang $ speed; -o-transisi: warna latar belakang $ speed; transisi: warna latar belakang $ speed; a @sertakan efek hover (200 ms); . tombol @include hover-effect (300ms);
Pemilih Placeholder
Pemilih Placeholder diperkenalkan dengan Sass 3.2 dan menyelesaikan masalah yang bisa menyebabkan sedikit mengasapi kode CSS yang Anda hasilkan. Lihatlah kode ini yang membuat pesan kesalahan:
.message font-size: 1.1em; padding: 11px; lebar-perbatasan: 1px; gaya perbatasan: solid; . message-hazard @extend .message; latar belakang: # C20030; warna: #fff; warna perbatasan: # A8002A; .message-success @extend .message; latar belakang: # 7EA800; warna: #fff; warna perbatasan: # 6B8F00;
Kemungkinan besar kelas pesan tidak akan pernah digunakan dalam HTML kami: sudah dibuat untuk diperpanjang, tidak digunakan apa adanya. Ini menyebabkan sedikit mengasapi pada CSS yang Anda hasilkan. Untuk membuat kode Anda lebih efisien, Anda bisa menggunakan pemilih placeholder yang ditandai dengan tanda persentase:
% message ukuran font: 1.1em; padding: 11px; lebar-perbatasan: 1px; gaya perbatasan: solid; . message-hazard @extend% button; latar belakang: # C20030; warna: #fff; warna perbatasan: # A8002A; . pesan-sukses tombol @extend%; latar belakang: # 7EA800; warna: #fff; warna perbatasan: # 6D9700;
Pada tahap ini Anda mungkin bertanya-tanya apa perbedaan antara extends dan mixin. Jika Anda menggunakan placeholder, mereka berperilaku seperti mixin tanpa parameter. Ini benar, tetapi output dalam CSS berbeda. Perbedaannya adalah itu aturan duplikat mixins sementara placeholder akan memastikan bahwa aturan yang sama berbagi pemilih, menghasilkan lebih sedikit CSS pada akhirnya.
Operasi
Sulit untuk menolak permainan kata-kata di sini, tetapi saya akan menahan diri dari lelucon medis untuk saat ini. Operator memungkinkan Anda untuk melakukan beberapa matematika dalam kode CSS Anda dan bisa sangat membantu. Contoh dalam panduan Sass sangat cocok untuk menampilkan ini:
.wadah lebar: 100%; artikel float: left; lebar: 600px / 960px * 100%; samping float: right; lebar: 300px / 960px * 100%;
Contoh di atas membuat sistem grid 960px dengan kerumitan minimum. Ini akan dikompilasi dengan baik ke CSS berikut:
.wadah lebar: 100%; artikel float: left; lebar: 62,5%; samping float: right; lebar: 31,25%;
Satu kegunaan besar yang saya temukan untuk operasi adalah untuk benar-benar mencampur warna. Jika Anda melihat pesan sukses Sass di atas, tidak jelas bahwa warna latar belakang dan perbatasan memiliki semacam hubungan. Dengan mengurangi warna abu-abu kita dapat menggelapkan warnanya, membuat hubungan terlihat:
$ primer: # 7EA800; . message-success @extend% button; latar belakang: $ primer; warna: #fff; border-color: $ primary - # 111;
Semakin terang warna yang dikurangi, semakin gelap warna yang dihasilkan. Semakin terang warna yang ditambahkan, semakin terang warna yang dihasilkan.
Fungsi
Ada sejumlah besar fungsi untuk digunakan: Fungsi angka, fungsi string, fungsi daftar, fungsi warna dan banyak lagi. Lihatlah daftar panjang dalam dokumentasi pengembang. Saya akan melihat pasangan di sini hanya untuk menunjukkan kepada Anda bagaimana mereka bekerja.
Itu meringankan dan menggelapkan fungsi dapat digunakan untuk mengubah kecerahan warna. Ini lebih baik daripada mengurangi nuansa, itu membuat semuanya lebih modular dan jelas. Lihatlah contoh kami sebelumnya menggunakan fungsi penggelapan.
$ primer: # 7EA800; . message-success @extend% button; latar belakang: $ primer; warna: #fff; border-color: darken ($ primary, 5);
Argumen kedua dari fungsi ini adalah persentase penggelapan yang diperlukan. Semua fungsi memiliki parameter; lihat dokumentasi untuk melihat apa itu! Berikut adalah beberapa fungsi warna cukup jelas lainnya: desaturate, jenuh, membalikkan, skala abu-abu.
Itu langit-langit fungsi, seperti di PHP, mengembalikan angka yang dibulatkan ke seluruh angka berikutnya. Ini dapat digunakan saat menghitung lebar kolom atau jika Anda tidak ingin menggunakan banyak tempat desimal di CSS akhir.
.title font-size: ceil ($ heading_size * 1.3314);
Ikhtisar
Fitur-fitur dalam Sass memberi kami kekuatan besar untuk menulis CSS yang lebih baik dengan sedikit usaha. Penggunaan mixin, extends, fungsi dan variabel yang tepat akan membuat stylesheet kita lebih mudah dikelola, lebih terbaca, dan lebih mudah ditulis.
Jika Anda tertarik pada preprocessor CSS serupa lainnya, saya sarankan untuk melihat KURANG (atau lihat panduan pemula kami) - prinsip dasarnya kurang lebih sama!
