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中文网其他相关文章！