快點開始SASS：SASS中的建築

> SASS架構：深入研究模塊化CSS開發

此摘錄來自>跳躍啟動SASS探索CSS體系結構的複雜性以及SASS如何增強過程。 我們將研究各種建築方法和最佳實踐，以構建可擴展和可維護的樣式表。

從歷史上看，CSS體系結構一直是一個挑戰。 SASS通過變量，混合素和其他功能來解決此問題，但最佳方法仍然是討論點。 流行的方法包括OOCS，SMACS，原子設計，ITCSS和BEM，每個設計都具有優勢和劣勢。 最好的策略通常是混合動力，將來自多個系統的元素結合在一起。

密鑰概念：

sass的增強

：
• 與CSS的不同，SASS的版本在編譯過程中結合了多個文件，減少了HTTP請求。 帶有部分的模塊化體系結構@import：@import將CSS分解為邏輯單元（部分由下劃線前綴表示，例如
>）。然後將這些導入到主文件中以進行編譯。
• > css架構方法：_buttons.scss探索OOCSS，SMACSS，原子設計，ITCSS和BEM，以了解其原理並將其適應您的項目。
>>>>>>>>>>
• > sass特徵：利用變量，混合素和功能，以保持一致性，可讀性和可維護性。
• >未來的注意事項：
• >有組織的文件結構：將樣式分類為>和>。
• 多個文件和文件夾：> base將代碼分為多個文件是預處理器的核心好處。 SASS允許顆粒組織。 components規則在編譯過程中將這些文件合併到瀏覽器的單個CSS文件中。 utilities

CSS與SASS Imports：

> > css 使用瀏覽器側處理，產生額外的HTTP請求。 SASS

處理彙編，導致單個輸出文件。 SASS返回到

>文件，@import>或

url的標準CSS導入和

> functions。 > sass進口和部分：

> @import> sass Imports（@import或.css文件）被編譯到主文件中。 partials（以http://>開頭的文件名）不是獨立編譯的，而是將其導入到其他文件中。 為簡單起見，可以在導入中省略擴展。 https:// url()

示例SASS目錄結構：

<code>sass/
├── config/
│   ├── _colors.scss
│   └── _webfonts.scss
├── layout/
│   ├── _navigation.scss
│   └── _banner.scss
├── modules/
│   ├── _calendar.scss
│   └── _contact.scss
└── main.scss</code>

>組件和組織：

>根據特異性（首先全局默認值，然後將站點範圍的模式，組件和覆蓋）組織到文件夾中。 以相同的順序將它們導入主文件（

）。 main.scss>

> oocss（面向對象的CSS）：

>強調在各種情況下可重複使用的顆粒狀設計模式。 關鍵原理：單獨的結構和皮膚，以及單獨的容器和內容。

>

原子設計：

將CSS組織成原子，分子，生物，模板和頁面。 提供了一種結構化的方法來建築組件。

> bem（block，element，modifier）：

> >使用命名慣例（）來創建可重複使用的獨立塊。 提供了一個全面的系統，包括CSS，HTML和JavaScript。

> smacss（CSS的可擴展和模塊化體系結構）：block__element--modifier

>

>將CSS分為基礎，佈局，模塊，狀態和主題。 專注於適用性的深度，並保持小型和獨立的組件。 >

> itcss（倒三角css）：

>基於覆蓋率，特異性和顯性性組織CSS，可視化為倒三角形。 層包括設置，工具，通用，元素，對象，組件和特朗普。 > Miriam的Mix-n-Match：

>一種靈活的方法，結合了來自各種系統的元素，優先考慮CSS級聯和使用“ SASS Central神經系統”來進行配置和可重複使用的工具。 > SASS 4：

這個即將到來的功能增強了控制和命名空間管理，解決了全局名稱空間衝突。 >允許導入模塊的特定部分並將其命名。 促進模塊之間的API。

@use結論： @forward

選擇正確的SASS架構取決於項目需求和團隊偏好。 結合各種系統的最佳實踐的混合方法通常是最有效的解決方案。 SASS 4的模塊化進口有望進一步改善模塊化和可維護性。

>

以上是快點開始SASS：SASS中的建築的詳細內容。更多資訊請關注PHP中文網其他相關文章！