Sass Tips Amalan Terbaik Dan Alat Untuk Pemaju

Sama seperti bagaimana jQuery merevolusikan JavaScript vanila, Sass telah merevolusikan CSS vanila. Kebanyakan pemaju yang belajar Sass bersetuju bahawa mereka tidak akan mahu kembali. Ramai juga bersetuju bahawa masalah terbesar dengan pemaju baru ialah cara mereka menggunakan Sass, bukan Sass sendiri.

Saya telah menjejaki web dan menyusun rencana ini amalan terbaik untuk menulis kod Sass yang boleh diperkembangkan dan boleh diguna semula. Cadangan adalah dari pendapat saya sendiri dan dari laman web yang dipercayai seperti Garis Panduan Sass.

Anda pastinya tidak perlu melaksanakan semua ciri ini ke dalam alur kerja anda. Tetapi ia bernilai sekurang-kurangnya menghiburkan idea-idea ini dan merenungkan manfaat yang berpotensi.

Organisasi Fail

Tempat terbaik untuk bermula dengan pembangunan Sass ialah organisasi fail. Jika anda sudah menjadi kod modular maka anda harus memahami nilai import dan parsial (lebih lanjut mengenai ini kemudian).

Tetapi buat masa sekarang lihatlah contoh struktur fail ini dari DoCSSa. Saya telah mencipta semula struktur fail ini yang boleh anda lihat di bawah:

Ini hanya cadangan dan ini salah satu daripada banyak cara anda boleh mengatur fail anda. Anda boleh mencari kaedah lain yang menggunakan struktur folder berbeza seperti “globals” untuk SCSS di seluruh tapak dan “halaman” untuk SCSS khusus halaman.

Mari berjalan melalui gaya organisasi yang dicadangkan ini untuk memeriksa tujuan setiap folder:

• / globals - mengandungi fail Sass yang boleh digunakan di seluruh laman seperti typografi, warna, dan grid
• / komponen - mengandungi fail Sass dengan gaya komponen seperti butang, jadual, atau medan input
• / bahagian - mengandungi fail Sass yang didedikasikan untuk halaman tertentu atau kawasan pada halaman (mungkin berfungsi lebih baik digabungkan ke dalam / komponen / folder)
• / utils - mengandungi utiliti pihak ketiga seperti Normalize yang boleh dikemas kini secara dinamik dengan alat seperti Bower.
• main.scss - fail Sass utama dalam folder akar yang mengimport semua yang lain.

Ini hanya titik permulaan asas dan terdapat banyak ruang untuk berkembang dengan idea anda sendiri.

Tetapi tidak kira bagaimana anda memilih untuk menganjurkan SCSS anda, penting bagi anda mempunyai sesetengah organisasi dengan fail berasingan (atau folder) untuk perpustakaan seperti Normalize yang perlu dikemas kini, ditambah komponen dalam Sass sebahagian untuk projek anda.

Sial sebahagian penting kepada amalan terbaik moden. Ini sangat disyorkan oleh pasukan reka bentuk Zurb dan oleh banyak pemaju frontend profesional yang lain.

Berikut adalah petikan dari laman web Sass yang menjelaskan sebahagian:

“Anda boleh membuat fail Sass separa yang mengandungi sedikit coretan CSS yang boleh anda sertakan dalam fail Sass yang lain. Ini adalah cara yang bagus untuk modularize CSS anda dan membantu memastikan perkara lebih mudah dikekalkan. Sebilangan besar hanyalah fail Sass yang dinamakan dengan garis besar utama. Anda mungkin namakan sesuatu seperti itu _partial.scss. Undur bawah membenarkan Sass mengetahui bahawa fail itu hanya fail separa dan tidak seharusnya dijana menjadi fail CSS. Sial sebahagian digunakan dengan @import arahan.”

Lihat juga jawatan lain mengenai struktur fail Sass:

• Bagaimana saya Struktur Projek Sass saya
• Estetika Sass: Organisasi Senibina dan Gaya
• Struktur Direktori yang Membantu Anda Mengekalkan Kod Anda

Strategi Import

Tidak cukup boleh dikatakan mengenai nilai import dan sebahagian Sass. Organisasi kod adalah kunci untuk mendapatkan struktur import dan aliran kerja yang hanya berfungsi.

Tempat terbaik untuk bermula adalah dengan lembaran glob yang mengandungi import, pembolehubah dan campuran bersama. Ramai pemaju lebih suka memisahkan pembolehubah dan campuran tetapi ini datang ke semantik.

Perlu diingat bahawa campuran adalah cara mengimport, atau sebaliknya menduplikasi, kod Sass. Mereka sangat kuat tetapi tidak boleh digunakan “statik” kod. Perlu diingat ada perbezaan di antara campuran, memperluaskan, dan ruang letak, yang semuanya digunakan dalam pembangunan Sass.

Mixin terbaik digunakan dengan nilai dinamik yang diluluskan ke mixin untuk perubahan kod. Sebagai contoh, semak campuran Sass ini yang mencipta kecerunan latar belakang antara dua warna.

@mixin linearGradient ($ top, $ bottom) background: $ top; / * Pelayar lama * / latar belakang: -moz-linear-gradient (atas, $ atas 0%, $ bawah 100%); / * FF3.6 + * / latar belakang: -webkit-gradien (linear, kiri atas, bawah kiri, warna berhenti (0%, $ atas), warna (100%, $ bawah); / * Chrome, Safari4 + * / latar belakang: -webkit-linear-gradient (atas, $ atas 0%, $ bawah 100%); / * Chrome10 +, Safari5.1 + * / latar belakang: -o-linear-gradient (atas, $ atas 0%, $ bawah 100%); / * Opera 11.10+ * / latar belakang: -ms-linear-gradient (atas, $ atas 0%, $ bawah 100%); / * IE10 + * / latar belakang: linear-gradient (ke bawah, $ atas 0%, $ bawah 100%); / * W3C * / penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /

Mixin mengambil dua nilai: warna atas dan warna bawah. Anda boleh menulis campuran berbeza untuk pelbagai jenis kecerunan yang merangkumi 3 atau 4+ warna yang berbeza. Ini membolehkan anda mengimport dan mengklonkan kod mixin semasa menukar parameter untuk pilihan tersuai.

Contoh dari Kod Bertanggungjawab kelihatan seperti ini:

.butang @include linearGradient (#cccccc, # 666666); 

Terkait dengan mixin adalah placeholder Sass yang terutama berguna dengan memperluas arahan. Ia diakui lebih kompleks daripada campuran, tetapi ini boleh menjadi cara untuk menggabungkan pemilih bersama tanpa menulis semula kod berlebihan.

Walaupun Sass hanya mempunyai satu kaedah @import, saya telah memasukkan campuran dan pemegang tempat untuk menunjukkan fleksibiliti kod yang boleh ditulis dalam satu fail tetapi disertakan di mana-mana sahaja.

Apabila membina struktur import hanya ingat untuk mengikuti konsep pengekalan DRY (Jangan Ulangi Diri).

Menamakan Konvensyen

Peraturan umum untuk konvensyen penamaan digunakan untuk pemboleh ubah, fungsi, dan campuran. Apabila menamakan sesuatu di Sass, ia disyorkan untuk gunakan semua huruf kecil dengan sengkang untuk pemisahan.

Sintaks kod Sass sebenarnya berdasarkan peraturan garis panduan CSS. Berikut adalah beberapa amalan terbaik yang disyorkan untuk diingat:

• dua (2) inden ruang, tiada tab
• Idealnya, garisan lebar 80 aksara atau kurang
• penggunaan ruang kosong secara bermakna
• gunakan komen untuk menerangkan operasi CSS

Perkara-perkara ini tidak diperlukan untuk kod Sass yang sah. Tetapi cadangan ini datang daripada pemaju profesional yang telah mendapati peraturan ini memberikan pengalaman pengkodan yang paling seragam.

Tetapi berkenaan dengan penamaan konvensyen, anda mungkin mempunyai dua struktur berbeza: satu untuk nama Sass dan satu lagi untuk nama kelas CSS. Sesetengah pemaju lebih suka BEM atas cadangan Sass. Tidak ada yang lebih, atau kurang, betul; hanya berbeza dengan prosedur operasi yang berlainan.

Masalahnya ialah BEM tidak membawa kepada pembolehubah atau campuran Sass kerana mereka tidak mempunyai struktur blok / elemen / pengubah (BEM). Saya sendiri lebih suka menggunakan konvensyen penamaan Sass tetapi anda boleh mencuba apa-apa dari camelCase ke sintaks dalaman anda sendiri.

Apabila menganjurkan pemboleh ubah dan campuran anda, disyorkan untuk berpecah mengikut kategori, kemudian senaraikannya mengikut urutan abjad. Ini menjadikan penyuntingan jauh lebih mudah kerana anda tahu di mana untuk mencari sesuatu.

Sebagai contoh, untuk menukar warna pautan anda akan membuka fail pembolehubah anda (mungkin _variables.scss) dan cari bahagian untuk pembolehubah warna. Kemudian cari pautan dengan nama (pautan header, pautan teks, dll) dan kemas kini warna. Mudah!

Untuk mendapatkan idea tentang bagaimana anda boleh menyusun jadual kandungan untuk fail Sass anda, lihat fail tetapan Yayasan.

 // Yayasan untuk Tetapan Laman // ----------------------------- // // Jadual Kandungan: // // 1 Global // 2. Breakpoints // 3. Grid // 4. Typography Base // 5. Typography Helpers ... // 1. Global // --------- $ global-font-size: 100 %; $ global-width: rem-calc (1200); $ global-lineheight: 1.5; // dan lain-lain

Amalan penamaan lain berkaitan dengan titik putus responsif. Apabila menamakan titik istirahat Sass, cuba mengelakkan nama khusus peranti. Lebih baik menulis nama seperti kecil, med, lg, dan xlg kerana mereka relatif kepada satu sama lain.

Ini lebih baik untuk hubungan dalaman antara titik putus, tetapi juga hebat untuk pasukan di mana pemaju mungkin tidak tahu peranti mana yang berkaitan dengan satu sama lain.

Sebenarnya meletakkan nama-nama, disyorkan bahawa anda menjadi seperti yang mungkin tanpa pemboleh ubah yang panjang. Kamu patut mengamalkan konvensyen penamaan di seluruh tapak yang mudah diingat semasa pengekodan.

Berikan konvensyen penamaan khusus untuk segala-galanya seperti warna, margin, susunan fon dan ketinggian garis. Bukan sahaja nama-nama itu dapat ditarik balik dengan cepat, tetapi ia membuat kerja anda lebih mudah apabila menulis nama pembolehubah baru yang perlu dipadankan dengan sintaks yang sedia ada.

Tetapi ada a garis halus antara kekhususan dan konvolusi. Amalan akan membantu anda mencari baris itu, dan menulis lebih banyak nama yang tidak dapat dilupakan menjadikannya lebih mudah untuk menyalin kod ke projek lain.

Nesting And Looping

Kedua teknik Sass ini sangat berbeza dalam tindakan, namun kedua-duanya mempunyai keupayaan untuk disalahgunakan jika tidak digunakan dengan sewajarnya.

Sarang adalah proses menambah pemilih bersarang bersama indentasi untuk mewujudkan lebih spesifik dengan kurang kod. Sass mempunyai panduan bersarang yang menggambarkan contoh-contoh kod yang bersarang dalam tindakan. Tetapi mudah untuk dibawa terbawa bersarang. Sekiranya anda terlalu ketagih anda boleh berakhir dengan kod yang kelihatan seperti ini:

div.content body div.container ... body div.content div.container div.articles ... body div.content div.container div.articles> div.post ... 

Jauh terlalu spesifik dan hampir mustahil untuk menulis ganti, kod jenis ini mengalahkan tujuan stylesheets cascading.

Memotong panduan SitePoint ini, anda akan mendapati tiga peraturan keemasan untuk bersarang:

• Jangan pergi lebih dari 3 tahap dalam.
• Pastikan output CSS bersih dan boleh digunakan semula.
• Gunakan bersarang apabila masuk akal, bukan sebagai pilihan lalai.

Pemaju Josh Broton mencadangkan bersarang apabila perlu, inden selebihnya sebagai peraturan sintaks umum.

Mengingatkan pemilih anda tidak akan menyebabkan sebarang kesan CSS runtuh. Tetapi anda akan mempunyai masa yang lebih mudah untuk memotong fail Sass yang menunjukkan kelas mana yang berkaitan dengan satu sama lain.

Gelung boleh juga boleh digunakan terlalu banyak jika tidak digunakan dengan betul. Tiga gelung Sass adalah @for, @while, dan @each. Saya tidak akan terperinci tentang bagaimana mereka semua berfungsi tetapi jika anda berminat menyemak siaran ini.

Sebaliknya saya ingin menutupi tujuan untuk menggunakan gelung dan bagaimana mereka berfungsi di Sass. Ini harus digunakan untuk menjimatkan kod penulisan masa yang boleh diautomatikasikan. Sebagai contoh, inilah coretan kod dari pos Clubmate yang menunjukkan beberapa kod Sass diikuti dengan output:

/ * Sass code * / @for $ i dari 1 hingga 8 $ width: percentage (1 / $ i) .col - # $ i width: $ width;  / * output * / .col-1 width: 100%; .col-2 width: 50%; .col-3 width: 33.333%; .col-4 width: 25%;  .col-5 lebar: 20%; .col-6 lebar: 16.666%; .col-7 lebar: 14.285%; .col-8 lebar: 12.5%;

Kelas lajur ini boleh digunakan bersempena dengan sistem grid. Anda juga boleh menambah lebih banyak lajur atau mengeluarkan beberapa hanya dengan mengedit kod gelung.

Gelung sepatutnya tidak digunakan untuk menggandakan pemilih atau sifat untuk pemilih; itulah yang dimaksudkan untuk campuran.

Juga apabila melingkari ada sesuatu yang dipanggil peta Sass yang menyimpan kunci: nilai pasangan data. Pengguna lanjutan hendaklah mengambil kesempatan daripada ini apabila mungkin.

Tetapi gelung Sass biasa adalah mudah dan berkesan dalam menyediakan output kod tanpa pengulangan. Sebab terbaik untuk menggunakan gelung adalah dengan Ciri-ciri CSS yang berbeza-beza output data.

Berikut adalah cara yang baik untuk memeriksa sama ada gelung anda membantu: tanya diri anda jika ada cara lain untuk mengeluarkan CSS yang anda perlukan dengan lebih sedikit baris kod. Jika tidak maka sintaks gelung mungkin idea yang hebat.

Sekiranya anda pernah mengelirukan atau ingin maklum balas mengenai sarang atau sass loops, anda perlu menghantar soalan sama ada / r / sass / atau / r / css /, komuniti Reddit yang aktif dengan pemaju Sass yang sangat berpengetahuan.

Modularization

Amalan menulis modular Sass adalah keperluan mutlak untuk kebanyakan projek (saya berhujah, setiap projek). Modularization adalah proses memecah projek menjadi modul yang lebih kecil. Ini boleh dicapai dalam penggunaan Sass sebahagiannya.

Idea di belakang modular Sass adalah untuk menulis fail SCSS individu dengan tujuan khusus yang menargetkan kandungan global (tipografi, grid) atau elemen halaman (tab, bentuk).

Takrif modul Sass cukup jelas dan membuat cadangan yang sangat spesifik: mengimport modul tidak boleh mengeluarkan kod.

Idea output mandatori untuk semua modul akan menjadi mimpi ngeri untuk pengoptimuman. Sebaliknya anda harus membuat modul secara individu dan hanya panggil yang anda perlukan. Modul boleh didefinisikan oleh campuran atau fungsi, tetapi adalah mungkin untuk membuat modul yang mengandungi pemilih juga.

Walau bagaimanapun, artikel Sass Way mencadangkan menulis semua pemilih sebagai campuran dan hanya memanggil mereka seperti yang diperlukan. Sama ada anda mengamalkan ini atau tidak akhirnya pilihan anda. Saya fikir ia bergantung kepada saiz projek dan keselesaan anda dengan mengendalikan campuran.

Memetik John Long dari jawatannya di The Sass Way:

“Bagi saya, modul telah menjadi unit asas atau blok bangunan projek Sass saya.”

Jika anda benar-benar mencari rutin Sass, saya cadangkan akan menjadi sepenuhnya modular. Cuba buat hampir semuanya sebagai sebahagian modular yang dimasukkan ke dalam fail CSS utama. Mula-mulanya alur kerja ini kelihatannya menakutkan tetapi ia masuk akal pada skala yang lebih besar - terutamanya dengan projek-projek besar.

Tambahan pula, lebih mudah untuk menyalin modul dari satu projek ke satu lagi apabila ia berada dalam fail berasingan. Fleksibiliti dan kod boleh diguna semula adalah landasan pembangunan modular.

Untuk mengetahui lebih lanjut mengenai modul Sass dan teknik modularization lihat siaran ini:

• Modul CSS: Selamat datang ke Masa Depan
• Kebaikan dan Kekurangan Modular Sass
• Pertubuhan CSS Modular dengan SMACSS & SASS

Cari Alur Kerja Perfect Anda

Setiap pemaju pasukan dan individu mempunyai amalan mereka sendiri yang berfungsi dengan baik. Anda harus mengamalkan amalan yang paling baik untuk anda secara peribadi, atau memilih untuk mengamalkan yang paling sesuai untuk pasukan anda secara profesional.

Juga pertimbangkan untuk menggunakan Gulp atau Grunt untuk automasi projek dan meminimumkan kod anda. Ini akan menjimatkan banyak alat buruh manual dan alat automasi kini sudah pasti merupakan sebahagian daripada amalan terbaik untuk pembangunan frontend moden.

Skim melalui perpustakaan sumber terbuka seperti SCSS Foundation pada GitHub untuk mengetahui lebih lanjut mengenai amalan terbaik yang digunakan oleh perpustakaan lain.

Perkara tentang amalan terbaik ialah mereka benar-benar memperbaiki kerja anda pada kebanyakan masa, tetapi terdapat banyak alternatif. Cubalah perkara-perkara dan lihat bagaimana perasaan mereka. Anda akan sentiasa belajar supaya amalan terbaik anda dapat berubah dengan cepat selama 5 tahun.

Satu cadangan akhir yang saya ada untuk keseluruhan proses Sass adalah membuat keputusan dengan jelas dalam fikiran. Tulis kod yang menjadikan pekerjaan anda lebih mudah. Jangan terlalu rumit projek jika ada cara yang lebih mudah untuk melakukannya.

Sass bertujuan untuk meningkatkan pengalaman perkembangan CSS, jadi bekerja dengan kejelasan dan amalan terbaik untuk mendapatkan pengalaman terbaik yang mungkin.

Wrap-Up

Kesesakan dalam aliran kerja Sass boleh diperbetulkan dengan gaya kod tweaking dan amalan terbaik. Saya telah menggariskan beberapa cadangan dalam post ini yang diberikan dari blog Sass dan pemaju profesional.

Cara terbaik untuk mengetahui lebih lanjut adalah menggunakan amalan ini ke dalam aliran kerja anda dan lihat apa yang berfungsi. Lama-kelamaan anda akan mendapati bahawa beberapa aktiviti lebih bermanfaat daripada yang lain, dalam hal ini anda harus menjaga apa sahaja kerja dan lepaskan apa yang tidak.

Semak pautan ini untuk mencari lebih banyak petua dan amalan terbaik untuk pembangunan Sass:

• Garis panduan Sass
• Visi untuk Sass kami
• 8 Tips untuk Membantu Anda Dapatkan Terbaik dari Sass
• Memperluas Dalam Sass Tanpa Mencipta Mess A
• Sass Best Practices - Nesting lebih daripada 3 tahap dalam