WordPress開發人員的SASS

> sass：簡化WordPress主題開發

強大的CSS預處理器

關鍵好處：

>

增強的組織： SASS允許將大型樣式表分解為較小的，易於管理的“部分”，改善代碼可讀性並簡化維護。 這包括使用嵌套選擇器並創建可重複使用的混合素。 提高效率：混合蛋白和功能通過消除重複代碼來加速樣式過程。
• >可擴展且可維護的代碼：變量和邏輯功能可促進清潔劑，更適應能力的代碼庫。
• >將SASS集成到您的工作流程中：

>

>理想情況下，從已經結合了SASS文件的主題開始（下劃線是一個受歡迎的選擇）。 但是，如果您的主題僅使用CSS，則將您的轉換為>是直接的第一步。 現有的CSS是有效的SCSS語法，可確保平穩的過渡。

與部分組織：style.cssstyle.scss

最初的轉換後，將您的

分為較小的主題文件（部分），前綴為下劃線（例如，）。 使用>語句將這些部分導入您的主文件，並保持正確的訂單以保留CSS級聯。 請記住要省略

語句中的下劃線和文件擴展名（例如，

）。 style.scss.scss重構可維護性：_navigation.scssstyle.scss @import重構提高代碼的清晰度和可維護性。 嵌套選擇器以提高可讀性，並用Mixins代替重複的屬性（考慮使用Bourbon或Compass等庫中的Common Mixins）。 請注意，在供應商前綴中使用Mixins通常效率不如使用AutoPrefixer。 @import@import 'navigation';

撰寫WordPress的sass：

>的CSS文件，位於主題的根目錄中，並在頂部包含特定的WordPress註釋。 >

>彙編方法：

• GUI編譯器： Codekit，Koala，Scout和Compass.App提供用戶友好的接口來編譯Sass。
• CLI編譯器：SASS和Compass提供命令行工具。 指南針，利用文件，允許配置輸出樣式（擴展或壓縮），輸入/輸出目錄等。 config.rbcompass watch保存WordPress註釋：

為了確保“基本WordPress”註釋包含在編譯

中，請在您的文件中以驚人的標記（）前綴。 這樣可以防止它們在壓縮過程中去除。 >

style.css組織部分：!style.scss

>使用文件夾構建您的局部，以改進組織。 使用目錄路徑（例如，

/*!
Theme Name: Sassy Theme
Theme URI: http://example.com/themes/sassy/
Author: Your Name
Author URI: http://example.com
Description: A Sass-powered WordPress theme
*/
// Import your partials here

）在文件夾中導入部分。 建議的文件夾結構：

（變量，混合素，重置，版式）>

@import 'base/variables';（網格，標頭，頁腳）

（按鈕，菜單，表單）
• /base/
（家庭，特定頁面樣式）
• /layout/
• 更多資源： /components/
Chris Coyier >“指南針編譯和WordPress主題”
• “如何與WordPress一起使用SASS” Andy Leverenz /pages/
>“ SASS Project的體系結構”

>常見問題（常見問題解答）：（這些常見問題解答在上面文章的正文中回答，因此在此處省略了這些常見問題以避免冗餘。）

以上是WordPress開發人員的SASS的詳細內容。更多資訊請關注PHP中文網其他相關文章！