Hocus-Pocus: Membina Rangka Kerja SASS Reka Bentuk

3

Hocus-Pocus adalah rangka kerja SASS yang bebas reka bentuk yang saya kerjakan dalam masa lapang saya. Idea utama di sebalik Hocus-Pocus adalah untuk membuat kit starter gaya universal dan ringan yang memberi tumpuan kepada ciri-ciri yang paling biasa. Dalam artikel ini, saya akan merangkumi mengapa saya memutuskan untuk membina kerangka SASS saya sendiri dan pendekatan yang saya ambil ketika berbuat demikian.

Takeaways Key

Hocus-Pocus adalah rangka kerja SASS yang bebas reka bentuk yang menawarkan kit starter gaya ringan, sejagat, yang memberi tumpuan kepada ciri-ciri yang paling biasa. Ia membolehkan pengguna mengubah rupa setiap komponen tunggal dengan pembolehubah dan membolehkan melumpuhkan ciri -ciri tertentu atau menentukan pelbagai pembantu.

Rangka kerja mudah dipasang dengan Bower dan NPM, yang memerlukan SASS dan AutoPrefixer untuk dijalankan. Ia mengikuti konvensyen penamaan kelas gaya yang biasa dan memberi perhatian kepada dokumentasi dan kemas kini ke Hocus-Pocus Changelog.

Rancangan masa depan untuk hocus-pocus termasuk menjadikannya kit starter SASS yang ideal untuk projek-projek yang kompleks, yang memberi tumpuan kepada komponen UI khusus projek dan definisi tema. Ciri -ciri baru utama tidak dirancang, tetapi penambahbaikan kepada sintaks dan nama kelas boleh dilaksanakan.

Mengapa saya mula bekerja di kerangka Sass?
• Singkatnya, saya akan mengatakan bahawa saya telah mula bekerja pada kerangka SASS kerana saya ingin menjimatkan masa ketika memulakan projek web baru. Saya perhatikan bahawa walaupun saya bekerja pada reka bentuk yang benar -benar tersuai, saya sentiasa menambah set alat yang sama, termasuk pakej standard yang sama, dan melaksanakan koleksi komponen CSS asas yang sama.
• Soalan kedua yang berikut adalah-
mengapa anda tidak menggunakan rangka kerja yang sedia ada, terkenal dan terbukti seperti bootstrap?

Tanggapan saya terhadap ini datang ke keutamaan dan pendekatan saya kepada CSS. Saya fikir perpustakaan seperti bootstrap atau asas yang hebat dan telah banyak mengubah bagaimana orang berfikir tentang CSS. Walau bagaimanapun, dalam kebanyakan kes dalam kerja projek saya sendiri, saya tidak memerlukan semua ciri -ciri dan komponen UI seperti bar kemajuan atau serbuk roti. Sebaliknya, saya lebih suka mempunyai sesuatu yang lebih universal. Saya lebih suka sesuatu yang boleh saya gunakan dalam mana -mana projek, tanpa perlu mengatasi kelas kerangka CSS.

Oleh kerana sebab-sebab di atas, dalam hocus-pocus anda boleh mengubah rupa setiap komponen tunggal dengan pembolehubah. Anda juga boleh melumpuhkan beberapa ciri atau menentukan pelbagai pembantu. Kelemahan pendekatan ini adalah bahawa saya tidak dapat menyediakan versi CSS yang disusun dari rangka kerja kerana tidak ada cara yang munasabah untuk menggunakan hocus-pocus tanpa keupayaan untuk mengemas kini pembolehubah.

Pra-Perundangan dan Prinsip

Pemasangan

Rangka kerja ini tersedia dan mudah dipasang dengan dua pengurus pakej yang berbeza: Bower dan NPM. Ia memerlukan SASS (versi minimum yang diperlukan ialah 3.3.0) dan AutoPrefixer dijalankan. AutoPrefixer digunakan untuk menambah awalan vendor yang diperlukan ke fail CSS yang disusun akhir. Saya tidak terlalu bimbang tentang keserasian antara pelbagai pelayar pada masa kini kerana saya secara peribadi mencari autoprefixing untuk mencukupi. Di samping itu, saya menggunakan Sass Linter (SCSS-Lint), tetapi ini tidak diperlukan untuk menjalankan Hocus-Pocus dan melakukan perkara dengan cara yang betul. Hocus-pocus akan berfungsi tanpa itu.

Penamaan Konvensyen

Prinsip seterusnya adalah yang penting untuk setiap rangka kerja - konvensyen penamaan. Saya lebih suka nama kelas gaya dash biasa tanpa BEM. Saya tidak akan mengadu jika anda peminat BEM dan lebih suka menggunakan konvensyen penamaan BEM, jika ia berfungsi untuk anda - pergi untuk itu. Dari perspektif saya, BEM tidak membetulkan semua masalah tanggungjawab dalam CSS. Saya juga mendapati bahawa saya mendekati CSS saya menggunakan elemen peringkat kelas yang kurang apabila saya menggunakan BEM. Menambah elemen baru ke blok yang sedia ada terlalu mudah. ​​

Dokumentasi

Terakhir tetapi tidak kurang, saya memberi perhatian yang mendalam kepada dokumentasi menulis dan mengekalkan changelog hocus-pocus sehingga kini. Dokumentasi tidak perlu sempurna, terutamanya pada mulanya, tetapi saya sentiasa berusaha mencari masa untuk memperbaikinya. Ini membantu pendatang baru mempelajari bagaimana alat ini berfungsi dan membolehkan saya menjejaki ciri -ciri kerangka.

Ciri -ciri Rangka

Ciri-ciri rangka kerja berikut adalah ciri yang paling sesuai untuk hocus-pocus pada pendapat saya dan memberikan gambaran terbaik tentang fokusnya sebenarnya.

Kebanyakan kelas rangka kerja diilhamkan dari projek sedia ada yang saya telah kerjakan pada masa lalu. Anda juga boleh melihat beberapa persamaan dengan rangka kerja CSS lain yang telah memberi inspirasi kepada saya, terutamanya kegemaran saya - Primer dan Inuitcss.

Ciri-ciri kerangka dalam hocus-pocus termasuk:

1. Normalisasi dengan beberapa peningkatan seperti set kotak-kotak global ke kotak sempadan atau elemen teks tanpa margin atas.
2. palet warna lalai baru berdasarkan clrs.cc.
3. grid bendalir berdasarkan flexbox dengan pembantu lebar yang menggunakan pecahan sebagai nama kelas (.1/2, .1/3 dan sebagainya).
4. Sokongan luas untuk reka bentuk web responsif. Terdapat pilihan untuk memilih sama ada "mudah alih pertama" atau "desktop pertama" sebagai pendekatan pilihan anda. Anda juga dapat menentukan titik putus untuk setiap dan masing -masing mendapat set pembantu mereka sendiri untuk jarak, grid, penglihatan, dan mixin sass individu.

contohnya:

$<span>rwd-type: desktop-first;
</span>$<span>rwd-map: (
</span>  <span>'mobile': 680px
</span><span>); 
</span>$<span>spacing-map: (
</span>  <span>'double': double($spacing-unit)
</span><span>);</span>

Kemudian dalam CSS yang disusun, anda akan mempunyai akses kepada kelas seperti .mobile-1/2, .mobile tersembunyi dan .mobile-padding-double.

1. Gaya lalai generik untuk elemen teks dengan irama menegak berdasarkan gridlover.
2. pengubah tambahan untuk elemen HTML lain seperti senarai sebaris, senarai menu, imej bulatan atau jadual zebra.
3. pelbagai jenis butang dan tiga versi bentuk: inline, disusun dan mendatar.
4. komponen UI penting seperti objek media, objek kotak, navbar, elemen wira untuk halaman pendaratan dan footer melekit. Tiada lagi.

harapan masa depan untuk hocus-pocus

Matlamat saya adalah untuk membuat hocus-pocus sebagai kit starter sass yang ideal tidak kira betapa kompleks projek anda. Dengan cara ini, anda boleh memberi tumpuan kepada menulis komponen UI khusus projek dan menentukan tema anda.

Saya tidak merancang untuk melaksanakan sebarang ciri baru utama. Saya fikir ciri -ciri yang disertakan adalah jumlah ciri yang munasabah dan mungkin menjadi yang terakhir. Saya mungkin akan meningkatkan sintaks untuk beberapa komponen atau menukar beberapa nama kelas tunggal, tetapi saya tidak meramalkan sebarang perubahan keserasian dari versi semasa. Buat masa ini, saya lebih komited untuk menetapkan pepijat yang berlaku kerana lebih ramai orang memberi Hocus-Pocus cuba.

Jika anda fikir rangka kerja Hocus-Pocus mungkin berguna untuk anda dalam projek yang akan datang, anda boleh mencari dokumentasi penuh di Hocus-pocus.io. Kod hocus-pocus adalah sumber terbuka dan semua tersedia di GitHub. Saya menghargai sebarang komen, maklum balas, dan maklumat mengenai isu -isu yang berpotensi.

Soalan Lazim (Soalan Lazim) Mengenai Membina Rangka Kerja SASS Reka Bentuk

Apakah rangka kerja sass dan mengapa penting dalam pembangunan web? . Ia penting dalam pembangunan web kerana ia membantu mempercepatkan proses mewujudkan helaian gaya untuk laman web. Ia membolehkan pemaju menggunakan pembolehubah, peraturan bersarang, campuran, dan fungsi, yang semuanya boleh sangat berguna dalam mengekalkan CSS.

Rangka kerja SASS bebas reka bentuk adalah berbeza daripada rangka kerja SASS biasa kerana ia tidak mengenakan sebarang keputusan reka bentuk pada pengguna. Ia memberikan slate yang bersih untuk pemaju untuk membina, membolehkan mereka melaksanakan pilihan reka bentuk mereka sendiri tanpa perlu mengatasi sebarang gaya yang sedia ada. >

menggunakan rangka kerja SASS bebas reka bentuk menawarkan beberapa faedah. Ia membolehkan pemaju mengekalkan asas kod yang bersih dan teratur, menjadikannya lebih mudah untuk mengurus dan mengemas kini. Ia juga menyediakan asas yang kukuh untuk membina, menjimatkan masa dan usaha dalam peringkat awal pembangunan.

Bagaimana saya boleh mula membina kerangka SASS yang bebas reka bentuk? Pertama, anda perlu menyediakan struktur projek anda. Kemudian, anda boleh mula membuat pembolehubah, campuran, dan fungsi anda. Selepas itu, anda boleh mula membina gaya asas dan modul susun atur anda. Akhirnya, anda boleh menyusun sass anda ke dalam CSS. Editor teks, pengkompil SASS, dan pelayar web untuk ujian. Anda juga boleh membantu menggunakan pelari tugas seperti Gulp atau Grunt untuk mengautomasikan aliran kerja anda. Rangka kerja SASS yang bebas reka bentuk boleh digunakan untuk sebarang jenis projek. Ini amat berguna untuk projek-projek besar di mana mengekalkan asas kod yang bersih dan teratur adalah penting. Rangka kerja SASS dengan mengubah suai pembolehubah, campuran, dan fungsi yang sesuai dengan keperluan anda. Anda juga boleh menambah gaya dan modul susun atur anda sendiri.

Apakah amalan terbaik ketika bekerja dengan kerangka SASS yang bebas reka bentuk? Sertakan menyimpan kod anda kering (jangan ulangi diri anda), menggunakan nama yang bermakna untuk pembolehubah dan campuran anda, dan mengatur kod anda dengan cara yang logik dan konsisten. Saya menggunakan rangka kerja SASS yang bebas reka bentuk dengan kerangka CSS yang lain? Walau bagaimanapun, anda mungkin perlu mengatasi beberapa gaya lalai rangka kerja lain untuk memastikan pilihan reka bentuk anda tidak ditindih.

Terdapat banyak sumber dalam talian yang tersedia untuk mempelajari lebih lanjut mengenai membina rangka kerja SASS yang bebas reka bentuk. Beberapa tempat yang baik untuk memulakan termasuk dokumentasi SASS rasmi, tutorial dalam talian, dan forum pembangunan web.

Atas ialah kandungan terperinci Hocus-Pocus: Membina Rangka Kerja SASS Reka Bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!