hocus-pocus：建立一個無設計的SASS框架

鑰匙要點

>使用Bower和NPM易於安裝框架，需要SASS和AUTOPREFIXER運行。它遵循常規的儀表式命名命名慣例，並密切關注文檔並更新到hocus pocus changelog。

Hocus-Pocus的未來計劃包括使其成為複雜項目的理想SASS入門套件，重點關注特定於項目的UI組件和主題定義。沒有計劃主要的新功能，但是可以實現對語法和班級名稱的改進。
為什麼我開始在Sass框架上工作？ 簡而言之，我會說我已經開始在SASS框架上工作，因為我想節省開始新的Web項目時的時間。我注意到，即使我從事真正的自定義設計，我也總是添加相同的工具，包括相同的標準軟件包，並實現類似的基本CSS組件集合。 >
• 隨後的第二個問題是 -
為什麼不使用現有的，眾所周知的和經過驗證的框架，例如Bootstrap？
• 我對此的反應取決於偏好和對CSS的方法。我認為像Bootstrap或Foundation這樣的圖書館很棒，並且大大改變了人們對CSS的看法。但是，在大多數情況下，在我自己的項目工作中，我不需要所有這些功能和UI組件，例如進度棒或麵包屑。相反，我更喜歡擁有更普遍的東西。我更喜歡可以在任何項目中使用的東西，而無需覆蓋框架CSS類。
由於上述原因，在Hocus-Pocus中，您可以更改帶有變量的每個組件的外觀。您甚至可以禁用某些功能或定義各種助手。這種方法的缺點是我無法提供框架的CSS版本，因為沒有合理的方法可以使用Hocus-Pocus而沒有更新變量的能力。

>預定和原理

>安裝

>該框架可用，易於與兩個不同的軟件包管理器：Bower和NPM安裝。它需要SASS（最低要求的版本為3.3.0），並且自動改裝器才能運行。 AutopReFixer用於將必要的供應商前綴添加到最終編譯的CSS文件中。如今，我不必太擔心各種瀏覽器之間的兼容性，因為我個人認為自動裝飾足夠了。此外，我使用Sass Linter（SCSS-LINT），但這對於運行Hocus Pocus並以正確的方式進行操作並不需要。 hocus-pocus將沒有它。

>命名約定

下一個原則對於每個框架 - 命名慣例。我更喜歡沒有bem的常規，破折號樣式的班級名稱。如果您是BEM的粉絲，我不會抱怨，並且更喜歡使用BEM命名約定，如果它對您有用，請繼續前進。從我的角度來看，BEM並沒有解決CSS中的所有責任問題。我還發現，當我使用BEM時，我使用較少的班級元素來接近我的CSS。在現有塊中添加新元素太容易了。

文檔

最後但並非最不重要的一點是，我密切關注編寫文檔，並保持最新的hocus pocus changelog。文檔並不一定是完美的，尤其是在一開始，但是我總是試圖找到時間來改善它。這有助於新移民學習該工具的工作原理，並允許我跟踪框架功能。

框架功能

在我看來，以下框架功能是Hocus pocus的最特徵，並最好地概述其真正的焦點。

>大多數框架類都是從我過去從事的現有項目中啟發的。您可能還會發現與激發我啟發的其他CSS框架的相似之處，尤其是我的最愛 - 底漆和Inuitcss。

> Hocus-Pocus中的框架功能包括：

>通過一些增強功能歸一化，例如全局盒裝設置設置為邊框框或文本元素，而沒有最高邊距。
>基於clrs.cc.
的新默認調色板
1. >基於flexbox的流體網格，其寬度助手使用分數作為類名稱（.1/2，.1/3等）。
>對響應式Web設計的廣泛支持。可以選擇“首先”選擇“移動”或“桌面”作為您的首選方法。您還可以為每個人定義一個斷點，以獲取自己的一組助手，用於間距，網格，可見性和單獨的sass mixin。
例如：
然後，在編譯的CSS中，您可以訪問.mobile-1/2，.mobile-hidded和.mobile-padding-double。
基於Gridlover的垂直節奏的文本元素的通用默認樣式。
>其他HTML元素的額外修飾符，例如內聯列表，菜單列表，圓形圖像或斑馬錶。
各種按鈕類型和三種形式的版本：內聯，堆疊和水平。
3. > Essential UI組件，例如媒體對象，框對象，Navbar，登陸頁面的英雄元素和粘性頁腳。僅此而已。
未來希望hocus-pocus

>我的目標是使Hocus-Pocus成為理想的SASS入門套件，無論您的項目多麼複雜。這樣，您可以專注於編寫特定於項目的UI組件並定義您的主題。

>

>我不打算實施任何主要的新功能。我認為其中的功能是合理的功能，可能是最終功能。我可能會改善某些組件的語法或更改一些單個類名稱，但我預計當前版本會破壞任何兼容性。目前，我更致力於修復發生的錯誤，因為越來越多的人嘗試了hocus pocus。

>如果您認為Hocus-Pocus框架在即將到來的項目中可能對您有所幫助，則可以在Hocus-pocus.io上找到完整的文檔。 Hocus-Pocus代碼是開源的，全部在GitHub上可用。我感謝有關潛在問題的任何評論，反饋和信息。
>常見問題（常見問題解答）有關構建無設計的SASS框架

>

什麼是SASS框架，為什麼在Web開發中很重要？
> sass（語法上很棒的樣式表）框架是一個預先準備的庫，被用作啟動項目的基礎。這在Web開發中很重要，因為它有助於加快為網站創建樣式表的過程。它允許開發人員使用變量，嵌套規則，混合素和功能，所有這些都在維護CSS中非常有用。

>

無設計的SASS框架與常規Sass Framework有何不同？

>無設計的SASS框架與常規SASS框架不同，因為它不會對用戶施加任何設計決策。它為開發人員提供了一個乾淨的板岩，使他們能夠實施自己的設計選擇，而不必覆蓋任何先前存在的樣式。

>使用使用無設計的SASS框架有什麼好處？ >

使用無設計的SASS框架提供了一些好處。它允許開發人員維護乾淨且有條理的代碼庫，從而易於管理和更新。它還為建立基礎提供了堅實的基礎，節省了在開發的初始階段的時間和精力。

>如何開始構建一個無設計的SASS框架？

>構建一個無設計的SASS框架涉及多個步驟。首先，您需要設置項目結構。然後，您可以開始創建變量，混音和功能。之後，您可以開始構建基本樣式和佈局模塊。最後，您可以將SASS編譯到CSS中。

我需要哪些工具來構建一個無設計的SASS框架？

以構建一個無設計的SASS框架，您需要一個文本編輯器，SASS編譯器和用於測試的Web瀏覽器。您可能還會發現使用像Gulp或Grunt這樣的任務跑步者來自動化工作流程很有幫助。
我可以為任何類型的項目使用無設計的SASS框架嗎？無設計的SASS框架可用於任何類型的項目。這對於維護乾淨和有組織的代碼庫至關重要的大型項目特別有用。

>

>我如何自定義一個無設計的SASS框架以滿足我的需求？通過修改變量，混音和功能以適應您的需求，SASS框架。您還可以添加自己的樣式和佈局模塊。
在使用無設計的SASS框架時，哪些最佳實踐是什麼？包括保持代碼乾燥（不要重複自己），使用有意義的變量和混合物的名稱，並以邏輯和一致的方式組織代碼。
我可以免費使用設計帶有其他CSS框架的SASS Framework？
是的，您可以與其他CSS框架一起使用無設計的SASS框架。但是，您可能需要覆蓋其他框架的某些默認樣式，以確保您的設計選擇不會被覆蓋。

>

>在哪裡可以找到更多有關構建無設計的SASS框架的資源？

>有許多在線資源可用於了解有關構建無設計的SASS框架的更多信息。一些好的起點包括官方的SASS文檔，在線教程和網絡開發論壇。

以上是hocus-pocus：建立一個無設計的SASS框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！