Panduan Sederhana Dan Mudah Untuk Memahami Sass
Suatu ketika dahulu, Thoriq Firdaus menulis artikel hebat tentang memulakan Sass yang menunjukkan cara untuk memasang dan menggunakan bahasa preprocessor CSS yang sangat berguna ini (anda mungkin mahu mencubanya, anda tahu, untuk memulakan).
Dalam artikel ini, saya fikir saya akan memberikan sedikit gambaran tentang apa yang boleh anda lakukan dengan Sass dan bagaimana pemaju menggunakannya setiap hari untuk membuat kod CSS yang lebih baik dan lebih modular. Melangkah ke bahagian yang anda mahu:
- Alat Perdagangan
- Pembolehubah
- Sarang
- Memperluas Aturan
- Mixin
- Pemilih Placeholder
- Operasi
- Fungsi
Alat Perdagangan
Thoriq menunjukkan kepada anda bagaimana anda boleh menggunakan Sass dari baris perintah menggunakan sass - watch perintah.
Jika anda lebih suka alat GUI, anda boleh pergi dengan aplikasi kegemaran saya peribadi, Codekit, alat pemaju web untuk menyusun Sass, concatenating, autoprefixing dan banyak lagi. Prepros adalah satu lagi aplikasi yang sangat berkemampuan yang boleh digunakan pada semua sistem. Kedua-duanya adalah permohonan berbayar tetapi ia berbaloi jika anda akan menggunakannya dalam jangka masa panjang.
Jika anda hanya mahu mencuba Sass tanpa membayar apa-apa anda boleh menggunakan terminal, atau koala (di sini kajian kami), aplikasi yang kaya dengan ciri platform merentas platform, yang boleh memegang tegangan terhadap rakan-rakan premium.
Pembolehubah
Salah satu perkara pertama yang perlu anda bungkus kepala anda adalah pembolehubah. Sekiranya anda berasal dari PHP atau lain-lain latar belakang bahasa pengekodan yang sama, ini akan menjadi sifat kedua kepada anda. Pembolehubah adalah untuk menyimpan bit dan kepingan maklumat yang boleh digunakan semula, seperti nilai warna contohnya:
$ primary_color: # 666666; .button color: $ primary_color; .important color: $ primary_color;
Ini tidak semestinya berguna di sini, tetapi bayangkan mempunyai 3,000 baris kod. Sekiranya skema warna anda berubah, anda perlu mengganti setiap nilai warna dalam CSS. Dengan Sass anda hanya boleh ubah suai nilai daripada $ primary_color pemboleh ubah dan dilakukan dengannya.
Pembolehubah digunakan untuk menyimpan nama font, saiz, warna dan pelbagai maklumat lain. Untuk projek-projek yang lebih besar, kita mungkin bernilai mengekstrak semua pembolehubah anda ke dalam fail berasingan (kami akan melihat bagaimana ini dilakukan tidak lama lagi). Apa yang membolehkan anda lakukan adalah mengulangi semula keseluruhan projek anda dan menukar fon dan aspek penting lain tanpa menyentuh peraturan CSS sebenar. Apa yang anda perlu lakukan ialah mengubah suai beberapa pembolehubah.
Sarang
Satu lagi ciri asas Sass memberikan anda keupayaan sarang peraturan. Mari kita anggap bahawa anda sedang membina menu navigasi. Anda mempunyai nav elemen yang mengandungi senarai tanpa urutan, senarai item dan pautan. Dalam CSS anda boleh melakukan sesuatu seperti ini:
#header nav / * Rules for nav nav * / #header nav ul / * Rules for the menu * / #header nav li / * Rules for list items * / #header nav a / * untuk pautan * /
Dalam pemilih, kami mengulangi banyak perkara. Sekiranya unsur mempunyai akar yang sama, kita boleh menggunakan sarang untuk tulis peraturan kami dengan cara yang lebih bersih.
Begini bagaimana kod di atas boleh dilihat di Sass:
#header nav / * Peraturan untuk kawasan nav * / ul / * Kaedah untuk menu * / li / * Peraturan untuk item senarai * /
Sarang sangat berguna kerana ia membuat stylesheets (banyak) lebih mudah dibaca. Dengan menggunakan sarang bersama dengan indentasi yang betul anda boleh mencapai struktur kod yang sangat mudah dibaca, walaupun anda mempunyai jumlah kod yang adil.
Satu kelemahan sarang adalah bahawa ia boleh membawa kepada kekhususan yang tidak perlu. Dalam contoh di atas saya telah merujuk kepada pautan dengan #header nav a. Anda juga boleh menggunakannya #header nav ul li a yang mungkin terlalu banyak.
Di Sass, lebih mudah untuk menjadi sangat spesifik kerana semua yang anda perlu lakukan adalah sarang peraturan anda. Berikut adalah jauh kurang boleh dibaca dan agak khusus.
#header nav / * Peraturan untuk kawasan nav * / ul / * Kaedah untuk menu * / li / * Peraturan untuk item senarai * / a / * Rules for links * /
Memperluas Aturan
Memperluas akan terbiasa jika anda telah bekerja dengan bahasa berorientasikan objek. Ini lebih baik difahami melalui contoh, mari kita buat 3 butang yang sedikit variasi antara satu sama lain.
.butang paparan: larikan sebaris; warna: # 000; latar belakang: # 333; jejari sempadan: 4px; padding: 8px 11px; .button-primary @extend .button; latar belakang: # 0091C2 .button-small @extend .button; saiz fon: 0.9em; padding: 3px 8px;
The .butang utama dan .butang kecil kelas semua memanjangkan .butang kelas yang bermaksud bahawa mereka mengambil semua sifatnya dan kemudian menentukan sendiri.
Ini sangat berguna dalam banyak situasi di mana variasi elemen boleh digunakan. Mesej (amaran / kejayaan / kesilapan), butang (warna, saiz), jenis menu dan sebagainya boleh menggunakan fungsi yang meluas untuk kecekapan CSS yang hebat.
Satu kaveat memperluaskannya mereka tidak akan berfungsi dalam pertanyaan media seperti yang anda jangkakan. Ini sedikit lebih maju tetapi anda boleh membaca semua tentang tingkah laku ini dalam Memahami Pemilih Placeholder - pemilih ruang letak adalah jenis khas untuk melanjutkan yang akan dibincangkan mengenai tidak lama lagi.
Mixin
Mixin adalah ciri kegemaran pengguna preprocessor. Mixin adalah peraturan yang boleh diguna semula - sesuai untuk peraturan khusus vendor atau untuk peraturan CSS panjang yang longgar.
Bagaimana pula untuk mewujudkan peraturan peralihan bagi unsur-unsur berlegar:
@mixing hover-effect -webkit-transition: background-color 200ms; -moz-peralihan: 200ms warna latar belakang; -o-transisi: warna latar belakang 200ms; peralihan: warna latar belakang 200ms; a @include hover-effect; .button @include effect hover;
Mixin juga membolehkan anda menggunakan pembolehubah kepada tentukan nilai-nilai di dalam mixin. Kita boleh menulis semula contoh di atas untuk memberi kita kawalan ke atas masa yang tepat peralihan. Kami mungkin mahu butang beralih sedikit perlahan misalnya.
@mixin hover-effect ($ speed) -webkit-transition: background-color $ speed; -moz-transition: background-color $ speed; -o-transition: background-color $ speed; peralihan: kelajuan latar belakang $ kelajuan; a @include hover-effect (200ms); .button @include effect hover (300ms);
Pemilih Placeholder
Pemilih tempat letak telah diperkenalkan dengan Sass 3.2 dan menyelesaikan masalah yang boleh menyebabkan sedikit pengambilan dalam kod CSS yang dihasilkan. Lihat kod ini yang menimbulkan mesej ralat:
.mesej font-size: 1.1em; padding: 11px; lebar sempadan: 1px; gaya sempadan: pepejal; .message-danger @extend .message; latar belakang: # C20030; warna: #fff; border color: # A8002A; .message-success @extend .message; latar belakang: # 7EA800; warna: #fff; border color: # 6B8F00;
Kemungkinan besar kelas mesej tidak akan digunakan dalam HTML kami: ia telah dicipta untuk dilanjutkan, tidak digunakan sebagai. Ini menyebabkan sedikit kembung dalam CSS yang dijana anda. Untuk membuat kod anda lebih cekap, anda boleh menggunakan pemilih ruang letak yang ditunjukkan dengan peratusan tanda:
% message font-size: 1.1em; padding: 11px; lebar sempadan: 1px; gaya sempadan: pepejal; .message-danger @extend% button; latar belakang: # C20030; warna: #fff; border color: # A8002A; .message-success @extend% button; latar belakang: # 7EA800; warna: #fff; border color: # 6D9700;
Pada peringkat ini, anda mungkin tertanya-tanya apa perbezaan antara extend dan mixins. Jika anda menggunakan ruang letak, mereka berkelakuan seperti campuran kurang parameter. Ini benar, tetapi output dalam CSS berbeza. Perbezaannya ialah campuran peraturan duplikat sementara ruang letak akan memastikan bahawa peraturan yang sama berkongsi pemilih, mengakibatkan kurang CSS pada akhirnya.
Operasi
Sukar untuk menahannya di sini, tetapi saya akan menahan sebarang jenaka perubatan buat masa ini. Pengendali membolehkan anda melakukan beberapa matematik dalam kod CSS anda dan boleh menjadi sangat berguna. Contohnya dalam panduan Sass adalah sempurna untuk mempamerkan ini:
.bekas lebar: 100%; artikel float: left; lebar: 600px / 960px * 100%; selain float: right; lebar: 300px / 960px * 100%;
Contoh di atas mencipta sistem grid berasaskan 960px dengan kerumitan minimum. Ia akan menyusun dengan baik ke CSS berikut:
.bekas lebar: 100%; artikel float: left; lebar: 62.5%; selain float: right; lebar: 31.25%;
Satu kegunaan hebat yang saya dapati untuk operasi adalah sebenarnya campuran warna. Jika anda melihat mesej kejayaan Sass di atas, ia tidak jelas bahawa warna latar belakang dan sempadan mempunyai beberapa jenis hubungan. Dengan mengurangkan warna kelabu kita boleh menggilap warna, menjadikan hubungan ini kelihatan:
$ primary: # 7EA800; .message-success @extend% button; latar belakang: $ primary; warna: #fff; border color: $ primary - # 111;
Yang lebih ringan warna yang diturunkan, yang lebih gelap akan menyebabkan naungan. Yang lebih ringan warna tambahan, lebih ringan teduh yang dihasilkan.
Fungsi
Terdapat banyak fungsi untuk digunakan: Fungsi nombor, fungsi rentetan, fungsi senarai, fungsi warna dan banyak lagi. Lihat senarai panjang dalam dokumentasi pemaju. Saya akan melihat beberapa pasangan di sini untuk menunjukkan kepada anda bagaimana mereka bekerja.
The meringankan dan gelap fungsi boleh digunakan untuk mengubah cahaya warna. Ini lebih baik daripada mengurangkan warna, ia menjadikan semuanya lebih modular dan jelas. Lihatlah contoh terdahulu kami menggunakan fungsi gelap.
$ primary: # 7EA800; .message-success @extend% button; latar belakang: $ primary; warna: #fff; border color: darken (primary $, 5);
Hujah kedua fungsi adalah peratusan kegelapan yang diperlukan. Semua fungsi mempunyai parameter; lihat dokumentasi untuk melihat apa yang mereka ada! Berikut adalah beberapa fungsi warna penjelasan yang lain: desaturate, tepu, terbalik, kelabu.
The ceil fungsi, sama seperti dalam PHP, mengembalikan nombor yang bulat ke nombor keseluruhan seterusnya. Ini boleh digunakan apabila mengira lebar lajur atau jika anda tidak mahu menggunakan banyak tempat perpuluhan dalam CSS akhir.
.tajuk font-size: ceil ($ heading_size * 1.3314);
Gambaran keseluruhan
Ciri-ciri dalam Sass memberi kita kuasa yang hebat untuk menulis CSS yang lebih baik dengan usaha yang kurang. Penggunaan yang betul dari campuran, memperluaskan, fungsi dan pemboleh ubah akan menjadikan gaya styles kita lebih dapat dipelihara, lebih mudah dibaca dan lebih mudah untuk ditulis.
Jika anda berminat dengan satu lagi preprocessor CSS yang serupa, saya cadangkan melihat LESS (atau periksa panduan pemula kami) - prinsipal pendasar adalah sama!
