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.
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:
- Normalisasi dengan beberapa peningkatan seperti set kotak-kotak global ke kotak sempadan atau elemen teks tanpa margin atas.
- palet warna lalai baru berdasarkan clrs.cc.
- grid bendalir berdasarkan flexbox dengan pembantu lebar yang menggunakan pecahan sebagai nama kelas (.1/2, .1/3 dan sebagainya).
- 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.
- Gaya lalai generik untuk elemen teks dengan irama menegak berdasarkan gridlover.
- pengubah tambahan untuk elemen HTML lain seperti senarai sebaris, senarai menu, imej bulatan atau jadual zebra.
- pelbagai jenis butang dan tiga versi bentuk: inline, disusun dan mendatar.
- 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!

CSS Grid adalah alat yang berkuasa untuk mewujudkan susun atur web yang rumit dan responsif. Ia memudahkan reka bentuk, meningkatkan kebolehcapaian, dan menawarkan lebih banyak kawalan daripada kaedah yang lebih lama.

Artikel membincangkan CSS Flexbox, kaedah susun atur untuk penjajaran yang cekap dan pengedaran ruang dalam reka bentuk responsif. Ia menerangkan penggunaan Flexbox, membandingkannya dengan grid CSS, dan butiran sokongan penyemak imbas.

Artikel ini membincangkan teknik untuk membuat laman web responsif menggunakan CSS, termasuk tag Meta Viewport, grid fleksibel, media cecair, pertanyaan media, dan unit relatif. Ia juga meliputi menggunakan grid CSS dan Flexbox bersama -sama dan mengesyorkan rangka kerja CSS

Artikel ini membincangkan harta saiz kotak CSS, yang mengawal bagaimana dimensi elemen dikira. Ia menerangkan nilai seperti kotak kandungan, kotak sempadan, dan kotak padding, dan kesannya terhadap reka bentuk susun atur dan penjajaran bentuk.

Artikel membincangkan membuat animasi menggunakan CSS, sifat utama, dan menggabungkan dengan JavaScript. Isu utama adalah keserasian penyemak imbas.

Artikel membincangkan menggunakan CSS untuk transformasi 3D, sifat utama, keserasian penyemak imbas, dan pertimbangan prestasi untuk projek web. (Kira -kira aksara: 159)

Artikel ini membincangkan menggunakan kecerunan CSS (linear, radial, mengulangi) untuk meningkatkan visual laman web, menambah kedalaman, fokus, dan estetika moden.

Artikel membincangkan unsur-unsur pseudo dalam CSS, penggunaannya dalam meningkatkan gaya HTML, dan perbezaan dari kelas pseudo. Menyediakan contoh praktikal.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Dreamweaver CS6
Alat pembangunan web visual

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
