用于WordPress主题开发的现代Sass工作流程

using-sass-to-style-your-wordpress-theme-1024x512-1

为 WordPress 主题创建现代、可维护的 CSS 代码面临着开发者需要克服的诸多挑战。使用 Sass（Syntactically Awesome Style Sheets，语法超赞样式表）作为 CSS 预处理器可以帮助您更有效地组织、维护和扩展样式。

然而，要建立一个高效的、与 WordPress 开发自然契合的 Sass 工作流程，需要周密的规划和技术知识。

本指南将向您展示如何为 WordPress 主题开发设置专业的 Sass 工作流程。它涵盖了现代构建工具、智能文件组织和部署实践，这些实践可以提高工作效率并确保样式的可维护性。

使用Sass进行WordPress开发的背景

专业的 WordPress 开发通常依赖于超出平台内置功能的工具和工作流程。Sass 可以通过变量、嵌套、混合、导入和内置函数等功能帮助您管理 CSS 的复杂性，从而发挥关键作用。

Sass 网站

Sass 为主题开发提供了诸多优势。一个典型的 WordPress 主题包含众多组件和模板部分的样式。Sass 并非将所有内容都放在一个笨重的样式表中管理，而是采用模块化架构，通过程序化结构提升可维护性和可扩展性。

这种结构化方法超越了标准 CSS 的功能，并且能够很好地满足 WordPress 独特的样式需求。与在 WordPress 中使用 style.css 不同，Sass 允许您创建模块化、特定用途的样式表，并通过简单的工作流程将其编译为优化的 CSS 文件：

将 Sass 文件编译为 CSS 的构建流程。
以可维护方式组织样式的文件结构。
用于本地测试和质量保证的开发工具。
将更改推送到预发布环境和生产环境的部署策略。

如何实施此工作流程取决于您团队的工具偏好、技术堆栈和项目复杂性。但大多数基于 Sass 的 WordPress 设置都遵循一些常见的做法：配置源映射以进行调试、在开发过程中监视文件以及优化生产环境的输出。

典型的设置会将 Sass 源文件与编译后的资源文件分开，从而更易于维护代码库并向浏览器提供清晰的输出。

在WordPress项目中编译Sass的3种方法

任何 Sass 工作流的基础都是将 Sass 文件转换为浏览器可用的 CSS 的构建过程。在 WordPress 中，有几种方法可以实现这一点。

1. 使用插件：最直接的方法

在 WordPress 主题中使用 Sass 最便捷的方式是通过插件。如果您刚刚开始使用 Sass，或者正在开发一个不需要完整构建流程的小型项目，这种方法是理想的选择。

例如，WP-Sass 通过 WordPress 内置的 wp-config.php 操作钩子来处理编译，并监控主题的 Sass 目录是否发生变化：

<?php
// Include the class (unless you are using the script as a plugin)
require_once( 'wp-sass/wp-sass.php' );
// enqueue a .less style sheet
if ( ! is_admin() )
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.scss' );
else
wp_enqueue_style( 'admin', get_stylesheet_directory_uri() . '/admin.sass.php' );
// you can also use .less files as mce editor style sheets
add_editor_style( 'editor-style.sass' );
?>

另一个选项 Sassify 稍旧一些，它采用了不同的方法——通过连接到 WordPress 的 API 来管理 Sass 的编译、输出路径和压缩设置。

虽然基于插件的解决方案很简单，但它们也有一些局限性：

性能开销。这些插件在服务器上编译 Sass，这会消耗大量资源。
构建选项有限。大多数 Sass 插件提供基本的编译功能，但缺少必要的功能。例如，通常对源映射的支持有限，缺少自动添加前缀功能等等。
安全注意事项。在生产服务器上运行编译器可能会增加潜在的攻击面，尤其是在插件没有定期维护的情况下。
版本控制问题。编译后的 CSS 文件通常位于主题目录中，这会使清理 Git 工作流程变得复杂。理想情况下，编译后的资源应该远离你的代码库。

然而，尽管存在这些局限性，但在某些情况下，插件仍然是一个不错的选择。例如，具有最少样式要求的小型网站、将项目交给没有技术专业知识来更深入地使用 Sass 的客户，或者在开发资源受限的情况下进行工作。

2. 使用NPM脚本：平衡的解决方案

如果您追求更强的控制力和灵活性，NPM 脚本可能是插件的可靠替代方案。Sass 编译是 NPM 的理想选择，因为它在简洁性和功能性之间取得了平衡。它比插件在主题开发方面提供了显著的改进，而无需完整任务运行器的复杂性：

通过将编译与 WordPress 执行分开，您可以消除服务器性能开销。
您可以精确控制编译过程的每个步骤。
package.json 文件确保所有团队成员使用相同的构建流程。
npm 脚本与 CI/CD 流水线无缝集成。

虽然这种方法比插件需要更多的初始设置，但它为专业主题开发提供了更强大、更可扩展的解决方案。

使用NPM进行Sass编译

首先创建一个 package.json 文件。您可以通过运行以下命令来执行此操作：

npm init -y

然后安装 Dart Sass：

npm install sass --save-dev

接下来，将这些脚本添加到您的 package.json：

{
"name": "your-theme-name",
"version": "1.0.0",
"description": "A WordPress theme with Sass",
"scripts": {
"sass": "sass src/sass/main.scss:assets/css/main.css",
"sass:watch": "sass --watch src/sass/main.scss:assets/css/main.css",
"build": "sass src/sass/main.scss:assets/css/main.css --style=compressed"
},
"devDependencies": {
"sass": "^1.58.3"
}
}

此设置为您提供三个实用脚本：

npm run sass 编译一次您的 Sass 文件。
sass:watch 监视更改并根据需要重新编译。
build 压缩编译您的 Sass 文件以供生产环境使用。

要支持旧版浏览器，请通过 PostCSS 添加 Autoprefixer：

npm install postcss postcss-cli autoprefixer --save-dev

更新您的 package.json 脚本：

{
"scripts": {
"sass": "sass src/sass/main.scss:assets/css/main.css",
"prefix": "postcss assets/css/main.css --use autoprefixer -o assets/css/main.css",
"build": "npm run sass && npm run prefix"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"postcss-cli": "^10.1.0",
"sass": "^1.58.3"
},
"browserslist": [
"last 2 versions",
"> 1%"
]
}

为了帮助调试，添加源映射：

{
"scripts": {
"sass": "sass src/sass/main.scss:assets/css/main.css --source-map",
"sass:watch": "sass --watch src/sass/main.scss:assets/css/main.css --source-map"
}
}

最后，要在 WordPress 中使用已编译的 CSS，请将已编译的 CSS 放入 functions.php 队列中：

function theme_enqueue_styles() {
$style_path = '/assets/css/main.css';
$full_path = get_template_directory() . $style_path;
wp_enqueue_style(
'theme-styles',
get_template_directory_uri() . $style_path,
array(),
file_exists($full_path) ? filemtime($full_path) : false
);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

此函数会加载已编译的 CSS，并使用文件的修改时间作为版本号来添加自动缓存清除功能。

3. 使用Gulp：全面的解决方案

Gulp 是一款功能强大的任务运行器，擅长自动化复杂的构建流程。对于需要大量样式设计的 WordPress 主题开发来说，它是最全面的解决方案。它能够帮助您处理 Sass 编译、浏览器同步以及介于两者之间的所有操作。为什么选择 Gulp？

Gulp 几乎可以管理构建流程的各个方面，例如编译、优化和部署。
您可以同时运行多个任务，从而缩短构建时间。
其生态系统提供了几乎满足所有构建需求的工具。
BrowserSync 集成可在开发过程中提供即时反馈。

虽然 Gulp 的学习曲线比其他方法更陡峭，但它的优势使其成为许多人的首选。

为WordPress主题设置Gulp

开始使用 Gulp 需要安装它以及几个用于处理特定任务的插件：

# Initialize your project
npm init -y
# Install Gulp and related packages
npm install --save-dev gulp gulp-sass sass gulp-autoprefixer gulp-sourcemaps browser-sync gulp-cssnano

您还应该在主题的根目录中创建一个 gulpfile.js，它处理几个不同的步骤。第一部分是导入所有必要工具的方法：

// 1. Import dependencies
const { src, dest, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const cssnano = require('gulp-cssnano');

每个软件包都有其特定的用途：

gulp：核心任务运行器。
gulp-sass 和 sass：将 Sass 编译为 CSS。
gulp-autoprefixer：添加供应商前缀以实现浏览器兼容性。
gulp-sourcemaps：生成用于调试的源码映射。
browser-sync：在开发过程中刷新浏览器。
gulp-cssnano：压缩 CSS 以供生产环境使用。

在这里，您可以定义源文件和目标文件的路径，并创建一个函数来编译 Sass：

// 2. Define file paths
const files = {
sassPath: './src/sass/**/*.scss',
cssPath: './assets/css/'
}
// 3. Sass development task with sourcemaps
function scssTask() {
return src(files.sassPath)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./'))
.pipe(dest(files.cssPath))
.pipe(browserSync.stream());
}

此函数主要负责查找所有 Sass 文件，初始化源映射以便调试，并将 Sass 编译为 CSS（并进行错误处理）。此外，它还会添加供应商前缀以兼容浏览器，编写源映射，保存编译后的 CSS，并根据更改更新浏览器。总而言之，它做了很多工作！

您还需要考虑创建一个可用于生产的构建函数、一个任务监视器和一个导出函数：

// 4. Sass production task with minification
function scssBuildTask() {
return src(files.sassPath)
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(dest(files.cssPath));
}
// 5. Watch task for development
function watchTask() {
browserSync.init({
proxy: 'localhost:8888' // Change this to match your local development URL
});
watch(files.sassPath, scssTask);
watch('./**/*.php').on('change', browserSync.reload);
}
// 6. Export tasks
exports.default = series(scssTask, watchTask);
exports.build = scssBuildTask;

此生产版本省略了源映射，并添加了最小化功能以优化文件大小。总而言之，此设置允许您运行 npx gulp 进行开发（带有文件监视和浏览器刷新功能），并运行 npx gulp build 进行生产构建。

增强您的Gulp工作流程

对于较大的项目，您可能需要根据不同的用途区分样式。以下是示例：

// Define paths for different style types
const paths = {
scss: {
src: './src/sass/**/*.scss',
dest: './assets/css/'
},
editorScss: {
src: './src/sass/editor/**/*.scss',
dest: './assets/css/'
}
}
// Main styles task
function mainStyles() {
return src('./src/sass/main.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./'))
.pipe(dest(paths.scss.dest))
.pipe(browserSync.stream());
}
// Editor styles task
function editorStyles() {
return src('./src/sass/editor-style.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./'))
.pipe(dest(paths.scss.dest))
.pipe(browserSync.stream());
}

对于包含大量 Sass 文件的复杂主题，您还应该通过缓存已处理的文件以避免不必要的重新编译、跟踪 Sass 依赖项以仅重新编译受影响的文件等方式来优化构建性能。不过，这超出了本文的讨论范围。

其他值得考虑的构建工具

虽然大多数开发者坚持使用 NPM 脚本或 Gulp，但您可能会发现其他一些为 WordPress 主题开发提供独特优势的替代方案。Vite 和 Webpack 是两种常见的解决方案。

Webpack 擅长打包 JavaScript 和资源，如果您的主题使用基于组件的架构或 JavaScript 框架，这将是理想的选择。它的优势在于能够通过代码拆分和“摇树优化”创建优化的软件包，这对于复杂且 JavaScript 密集的主题非常有价值。

相比之下，Vite 是一款较新的构建工具，它通过其创新的模块加载方法优先考虑开发速度。它的开发服务器提供近乎即时的热模块替换。这是一种实现迭代开发的快速方法。虽然它与 WordPress 工作流程的集成仍在不断发展，但如果您可以利用它进行自己的主题开发，这将是一个令人兴奋的选择。

对于更简单的项目或个人偏好，Sass CLI 提供了一种无需额外工具的简单方法：

# Install Sass globally
npm install -g sass
# Compile Sass files
sass --watch src/sass/main.scss:assets/css/main.css

虽然手动编译缺乏专用构建工具的自动化和集成功能，但其简单性确实具有优势。这种方法非常适合具有简单样式需求的简单主题、快速原型或小型项目。它也适合那些喜欢极简工具的用户。

如何使用Sass构建和组织WordPress开发项目

除了构建过程之外，有效地组织 Sass 文件对于可维护性和协作至关重要。精心规划的结构可以使您的代码随着主题的增长而更易于导航、更新和扩展。

7-1 模式：复杂主题的模块化组织

7-1 模式是大型项目中组织 Sass 文件的典型做法。它将样式代码分为七个主题文件夹和一个导入所有内容的主文件 (main.scss)。

这种模式创建了逻辑上的分离，使查找和更新特定样式变得更加容易。以下是该结构的概述：

Abstracts。包含不直接输出 CSS 的助手程序、颜色、排版和间距变量、计算和逻辑函数、可重用样式模式的 mixin 以及可扩展样式的占位符。
Base。包括基本样式和默认值、排版规则、实用程序类和元素选择器（不带类）。它还允许您重置或规范化 CSS。
Components。它包含可重用的 UI 组件，例如按钮、表单和卡片、导航菜单、小部件和侧边栏以及媒体格式（例如图像、视频）。
Layouts。您可以在此处定义结构元素，例如页眉和页脚、网格系统、容器结构和侧边栏排列。
Pages。这包含页面特定的样式、主页专业化、单个帖子布局、存档页面变体和特殊登录页面。
Themes。在此部分，您可以拥有不同的视觉主题或模式。明暗主题、季节性变化、管理区域自定义和品牌特定主题都在这里。
Vendors。最后一部分用于存储第三方样式、插件覆盖、框架自定义以及外部组件样式。

主文件（通常为 main.scss）会按特定顺序导入所有部分：

// Abstracts
@import 'abstracts/variables';
@import 'abstracts/mixins';
// Vendors (early to allow overriding)
@import 'vendors/normalize';
// Base styles
@import 'base/reset';
@import 'base/typography';
// Layout
@import 'layouts/header';
@import 'layouts/grid';
// Components
@import 'components/buttons';
@import 'components/forms';
// Page-specific styles
@import 'pages/home';
@import 'pages/blog';
// Themes
@import 'themes/admin';

这种模块化方法可以避免大型项目中经常出现的“CSS 大杂烩”。它是一个可维护的系统，可以根据主题的复杂性进行扩展。

以区块为中心的结构：区块和站点编辑器的现代化组织

如果您的主题专注于区块编辑器，那么优先考虑这些组件的结构通常更有意义。这可以使您的 Sass 组织与 WordPress 基于块的内容模型保持一致。

与 7-1 模式相比，该结构更加直观：

Core。您的基础样式和配置位于此处，例如变量、混合宏、辅助函数、基本元素样式和核心 WordPress 区块。
Blocks。这是自定义块变体、扩展的核心块样式和区块样板样式所在的位置。
Templates。您将在此处添加单个文章模板、存档模板和自定义页面模板。
Utilities。这些是辅助类和工具，例如间距实用程序、排版类以及颜色或背景实用程序。

这种结构支持使用 Blocks 进行开发的模块化特性，从而更容易在变体和模板之间保持一致性。

WordPress特定Sass组织注意事项

在组织 WordPress 主题的 Sass 时，需要注意几个特定于平台的注意事项。WordPress 的模板结构决定了不同类型的内容应使用哪些 PHP 文件。

在 Sass 组织中镜像此层次结构可以在 PHP 模板及其相关样式之间建立直观的联系。因此，请考虑组织页面特定的样式以匹配 WordPress 模板结构：

// _archive.scss
.archive {
// Base archive styles
&.category {
// Category archive styles
}
&.tag {
// Tag archive styles
}
&.author {
// Author archive styles
}
}

这种方法可以立即明确哪些样式适用于特定的模板上下文，同时简化维护和更新。

插件兼容性组织

插件通常会注入自己的样式，而您的主题可能需要覆盖这些样式。与其将覆盖样式分散到您的基础文件中，不如考虑将它们隔离开来：

例如，WooCommerce 集成的结构可以采用多种结构之一：

vendors/woocommerce/
├── _general.scss          // Base WooCommerce styles
├── _buttons.scss          // WooCommerce button styles
├── _forms.scss            // WooCommerce form styles
├── _shop.scss             // Shop page styles
└── _single-product.scss   // Single product page styles

这种组织方式使得在插件更新时轻松更新插件兼容样式，保持主题样式和插件样式之间的分离，并快速找到与插件相关的特定样式。

始终为覆盖设置命名空间，以避免样式冲突：

// _woocommerce.scss
.woocommerce {
.products {
// Custom product grid styles
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 2rem;
}
.single-product {
// Single product page styles
.price {
font-size: 1.5rem;
color: $price-color;
}
}
}

这种方法可以防止插件样式渗透到主题的核心设计中，同时在需要的地方提供清晰的覆盖。

编辑器和后台样式

您通常需要同时设置前端和区块编辑器界面的样式。因此，您可以为后台特定的样式创建专用的结构：

admin/
├── _editor.scss         // Block editor styles
├── _login.scss          // Login page customization
└── _dashboard.scss      // Dashboard customizations

对于区块编辑器支持，编译一个单独的样式表并像这样将其排队：

function theme_editor_styles() {
add_theme_support('editor-styles');
add_editor_style('assets/css/editor.css');
}
add_action('after_setup_theme', 'theme_editor_styles');

这可以使您的编辑器上下文保持简洁、一致，并在视觉上与前端保持一致。

响应式设计实现

WordPress 主题必须兼容各种尺寸的设备，因此您需要系统地进行响应式设计。这时，使用 Sass mixins 可以创建一个一致且可维护的系统：

// Breakpoint mixin
@mixin respond-to($breakpoint) {
@if $breakpoint == "sm" {
@media (min-width: 576px) { @content; }
}
@else if $breakpoint == "md" {
@media (min-width: 768px) { @content; }
}
@else if $breakpoint == "lg" {
@media (min-width: 992px) { @content; }
}
}

如果将响应式样式与其基本定义保持上下文接近，则可以创建更易于维护的代码库，并清晰地展示组件如何跨断点进行自适应。

设置本地开发环境

本地开发是任何 WordPress 工作流程的核心部分——在使用 Sass 等工具时，这一点尤为重要。正确的设置可以实现快速迭代、实时反馈，并在 Sass 构建流程和 WordPress 网站之间实现无缝连接。

您可以选择 MAMP 或者其他成熟的本地开发环境。使用这些软件，根据您的需求进行定制，安装和设置非常简单。

使用 Gulp 在主题目录中设置 Sass 编译是最直接的选择。首先，导航到主题目录，然后初始化 NPM 并安装依赖项，就像我们之前解释的那样。

接下来，创建一个 gulpfile.js 文件，并为您的网站配置 BrowserSync：

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
// Get your DevKinsta site URL from the dashboard
const siteURL = 'your-site-name.local';
function scssTask() {
return src('./src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./'))
.pipe(dest('./assets/css/'))
.pipe(browserSync.stream());
}
function watchTask() {
browserSync.init({
proxy: siteURL,
notify: false
});
watch('./src/sass/**/*.scss', scssTask);
watch('./**/*.php').on('change', browserSync.reload);
}
exports.default = series(scssTask, watchTask);

然后设置文件结构：

mkdir -p src/sass/{abstracts,base,components,layouts,pages,themes,vendors}
touch src/sass/main.scss

现在您可以运行 npx gulp 了。每当 Sass 或 PHP 文件发生更改时，您的样式都会进行编译、注入浏览器并根据需要进行刷新。

从开发环境迁移到生产环境

在本地开发完主题后，您需要一个可靠的策略来将其部署到预发布环境和生产环境。

这可确保编译后的 CSS 和 Sass 源文件安全地迁移到暂存区。对于部署需求更复杂的团队，可以使用 Gulp 自动化暂存部署。以下是示例：

const { src, parallel, series } = require('gulp');
const rsync = require('gulp-rsync');
// Clean and build tasks defined earlier
// Deployment task
function deployToStaging() {
return src('dist/**')
.pipe(rsync({
root: 'dist/',
hostname: 'your-sftp-host',
destination: 'public/wp-content/themes/your-theme/',
archive: true,
silent: false,
compress: true
}));
}
// Export the deployment task
exports.deploy = series(
parallel(cleanStyles, cleanScripts),
parallel(styles, scripts),
deployToStaging
);

部署到临时环境后，您仍然应该进行全面的测试，以确保 Sass 编译的 CSS 能够正常工作：

视觉测试。验证所有样式是否按预期在各个页面上应用。
响应式测试。检查所有断点是否正常运行。
性能测试。Google PageSpeed Insights、Lighthouse 和其他工具可以帮助您检查 CSS 加载情况。
跨浏览器验证。请记住在不同的浏览器上进行测试以发现兼容性问题。

在测试期间，请特别注意路径、缓存设置和文件权限，因为这些是导致部署问题的常见原因。接下来，您可以将主题部署到生产环境。

在部署之前，你还需要确保 CSS 得到适当的优化。优化的方法有很多，例如压缩、文件组织和缓存清除。

创建有效的区块编辑器集成

现代 WordPress 开发以区块编辑器为中心，良好的样式设计将确保编辑和前端之间的一致性。

例如，与其纯粹按照页面模板来组织样式，不如考虑以区块为中心进行组织。您可以先为每种区块类型创建专用的 Sass 局部代码：

blocks/
├── _paragraph.scss      // Paragraph block styles
├── _heading.scss        // Heading block styles
├── _image.scss          // Image block styles
├── _gallery.scss        // Gallery block styles
└── _custom-block.scss   // Custom block styles

这样，随着 WordPress 核心的演变和主题区块库的扩充，样式的维护将变得更加轻松。每个区块的样式都可以整齐地保存并独立更新。

在每个区块文件中，请尝试建立与 WordPress 区块类一致的清晰命名约定：

// _paragraph.scss
.wp-block-paragraph {
// Base paragraph block styles
font-family: $body-font;
line-height: 1.6;
// Block variations
&.is-style-lead {
font-size: 1.2em;
font-weight: 300;
}
&.has-background {
padding: 1.5rem;
}
}

这种方法在块编辑器控件和生成的样式之间建立了直接关联，从而使您的主题更具可预测性和可维护性。

为了使编辑体验与前端保持同步，请编译单独的样式表并在它们之间共享变量：

// In your gulpfile.js
function themeStyles() {
return src('./src/sass/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(dest('./assets/css/'));
}
function editorStyles() {
return src('./src/sass/editor.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(dest('./assets/css/'));
}

专门为区块编辑器上下文排队这些编辑器样式：

function theme_editor_styles() {
add_theme_support('editor-styles');
add_editor_style('assets/css/editor.css');
}
add_action('after_setup_theme', 'theme_editor_styles');

为了保持视觉一致性，您可以在两个样式表中使用共享变量和混合：

// abstracts/_variables.scss
$primary-color: #0073aa;
$secondary-color: #23282d;
$heading-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$body-font: 'Georgia', serif;
// Import in both main.scss and editor.scss

这种方法可确保编辑和查看体验中的颜色、字体和间距保持一致。

与theme.json集成

theme.json 文件是 Block 主题定义全局设置的方式，这些设置会影响编辑器和前端。将 Sass 变量与 theme.json 设置对齐可以创建一个有凝聚力的系统。例如：

{
"version": 2,
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0073aa"
}
]
}
}
}

您可以在 Sass 文件中匹配此内容：

// Match theme.json values
$color-primary: #0073aa;
// Generate matching custom properties
:root {
--wp--preset--color--primary: #{$color-primary};
}

这种简单的同步功能将确保您的自定义样式与块编辑器的内置控件和全局样式系统协调一致。

使用Sass进行性能优化

性能优化是专业 WordPress 主题的关键考虑因素。除了基本的编译功能外，Sass 工作流还可以引入其他多种技术来提升加载速度和用户体验 (UX)。

实现关键CSS以加快加载速度

关键 CSS 是一种优化技术，它提取并内联网站在“首屏”渲染内容所需的最少 CSS。在 WordPress 开发中，关键渲染路径通常非常重要；优化关键 CSS 可以通过减少阻塞渲染的 CSS 来提升感知加载时间。

编写关键 CSS 本身就是一门技能——添加 Sass 会进一步提升难度。首先，您需要为关键样式创建一个单独的 Sass 文件，然后配置构建流程以单独编译此文件：

// critical.scss - Only include styles for above-the-fold content
@import 'abstracts/variables';
@import 'abstracts/mixins';
// Only essential styles
@import 'base/reset';
@import 'layouts/header';
@import 'components/navigation';
function criticalStyles() {
return src('./src/sass/critical.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(dest('./assets/css/'));
}

要在主题中实现这个关键的 CSS，您只需在异步填充 CSS 加载时将其内联在 head 标签中：

function add_critical_css() {
$critical_css = file_get_contents(get_template_directory() . 
'/assets/css/critical.css');
echo '' . $critical_css . '';
// Async load full CSS
echo '';
}
add_action('wp_head', 'add_critical_css', 1);

此技术可以更快地显示内容，同时其余样式在后台加载。但是，并非每个页面都需要主题的所有样式。基于当前模板或内容类型的条件加载可以进一步提升性能。

您可以通过在主题的 functions.php 中加载特定于模板的 CSS 来实现此目的：

function load_template_specific_css() {
// Base styles for all pages
wp_enqueue_style('main-styles', 
get_template_directory_uri() . '/assets/css/main.css');
// Product page specific styles
if (is_singular('product')) {
wp_enqueue_style('product-styles', 
get_template_directory_uri() . '/assets/css/product.css');
} 
// Archive page specific styles
elseif (is_archive()) {
wp_enqueue_style('archive-styles', 
get_template_directory_uri() . '/assets/css/archive.css');
}
}
add_action('wp_enqueue_scripts', 'load_template_specific_css');

这种方法可以减少每个页面的 CSS 负载，缩短加载时间，并保持较高的设计质量。

实现智能缓存控制

管理缓存始终会让最终用户受益，因为他们可以获得最新的样式，同时利用缓存来保存未更改的资源。使用 Sass 自动清除缓存会在主题的样式队列中进行：

function enqueue_styles_with_cache_busting() {
$css_file = get_template_directory() . '/assets/css/main.css';
$version = filemtime($css_file);
wp_enqueue_style('main-styles', 
get_template_directory_uri() . '/assets/css/main.css', 
array(), $version);
}
add_action('wp_enqueue_scripts', 'enqueue_styles_with_cache_busting');

此技术使用文件的修改时间作为版本号，确保浏览器仅在 CSS 发生更改之前缓存 CSS，然后自动下载更新版本。

安全管理源映射

源映射在开发过程中非常重要，但在生产环境中可能会暴露您的 Sass 源代码。这时，实施特定于环境的源映射处理可能会有所帮助：

// In your gulpfile.js
const isProduction = process.env.NODE_ENV === 'production';
function styles() {
return src('./src/sass/main.scss')
.pipe(gulpif(!isProduction, sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulpif(!isProduction, sourcemaps.write('./')))
.pipe(dest('./assets/css/'));
}

对于生产中的受控调试，您可能希望仅向管理员提供源映射：

function conditional_source_maps() {
// Only for administrators with debug parameter
if (current_user_can('manage_options') && isset($_GET['debug_css'])) {
wp_enqueue_style('debug-maps', 
get_template_directory_uri() . '/assets/css/main.css.map');
}
}
add_action('wp_enqueue_scripts', 'conditional_source_maps', 999);

这既保留了源映射在调试方面的优势，又保护了您的源代码免遭不必要的暴露——这是一个全方位的巨大优势。

构建高效的团队工作流程

对于任何使用 Sass 开发 WordPress 主题的团队来说，一致的工作流程和标准都至关重要。对于特定于 Sass 的工作流程，您应该在几个关键领域建立清晰的标准。

例如，尝试为变量、混合宏和类定义一致的命名约定和模式：

// Variables: use kebab-case with descriptive prefixes
$color-primary: #0073aa;
$font-heading: 'Helvetica Neue', sans-serif;
$spacing-base: 1rem;
// Mixins: verb-based naming
@mixin create-gradient($start, $end) {
background: linear-gradient(to bottom, $start, $end);
}
// Classes: BEM convention
.card {
&__header { /* header styles */ }
&__body { /* body styles */ }
&--featured { /* featured variant */ }
}

规范新文件加入项目的方式也是一个好主意。以下是一些您可以实施的示例标准：

新组件将放入 components 目录。
每个组件都有自己的文件。
所有文件将使用相同的导入顺序。
部分文件始终以下划线开头。

此外，还要定义代码注释和文档的要求。您可以在 .stylelintrc 配置文件中“规范化”这些标准，以自动执行：

{
"extends": "stylelint-config-standard-scss",
"rules": {
"indentation": 2,
"selector-class-pattern": "^[a-z][a-z0-9-]*$",
"max-nesting-depth": 3,
"selector-max-compound-selectors": 4
}
}

代码审查对 Sass 至关重要，因为细微的更改可能会对主题的外观产生深远的影响。您自己的审查流程应通过以下几种方式专门处理样式问题：

遵循样式指南。确保新样式符合项目当前的设计系统。
性能考虑。审查所有 CSS 输出，以发现任何优化机会。
跨浏览器兼容性。验证您构建的样式是否适用于所有必需的浏览器。

当然，您应该将这些 Sass 特有的关注点纳入团队的代码审查清单中，以保持整个代码库的高标准。

Sass项目的版本控制策略

版本控制中有几个 Sass 特有的注意事项值得您关注。一个重要的决定是是否提交编译后的 CSS。有两种观点会影响您的选择：

不提交 CSS 可以使您的代码库保持整洁，但在部署期间需要构建步骤。
提交 CSS 会增加代码库的大小，但也能确保您部署的文件与测试文件完全匹配。

如果您选择不提交已编译的文件，则需要确保它们在您的 .gitignore 文件中得到适当的排除：

# .gitignore
.sass-cache/
*.css.map
*.scss.map
node_modules/
/assets/css/

最后，检查样式工作的分支结构，并思考如何管理新组件（例如功能分支）、视觉变体（可以使用主题分支）以及主要设计更新（或许可以使用特定于样式的分支）的样式变更。

小结

现代的 Sass 工作流程可以将您的 WordPress 主题开发从一项挑战转变为一个结构化、可维护的流程。

高效的 Sass 工作流程的关键组成部分包括简洁而强大的构建流程、周到的文件组织、性能优化以及可靠的团队工作流程。随着块编辑器的不断发展，灵活而强大的 Sass 实现可以让您在适应变化的同时，仍然能够提供高质量的结果。

用于WordPress主题开发的现代Sass工作流程

使用Sass进行WordPress开发的背景

在WordPress项目中编译Sass的3种方法

1. 使用插件：最直接的方法

2. 使用NPM脚本：平衡的解决方案

使用NPM进行Sass编译

3. 使用Gulp：全面的解决方案

为WordPress主题设置Gulp

增强您的Gulp工作流程

其他值得考虑的构建工具

如何使用Sass构建和组织WordPress开发项目

7-1 模式：复杂主题的模块化组织

以区块为中心的结构：区块和站点编辑器的现代化组织

WordPress特定Sass组织注意事项

插件兼容性组织

编辑器和后台样式

响应式设计实现

设置本地开发环境

从开发环境迁移到生产环境

创建有效的区块编辑器集成

与theme.json集成

使用Sass进行性能优化

实现关键CSS以加快加载速度

实现智能缓存控制

安全管理源映射

构建高效的团队工作流程

Sass项目的版本控制策略

小结

评论留言

取消回复

文章目录

用于WordPress主题开发的现代Sass工作流程

使用Sass进行WordPress开发的背景

在WordPress项目中编译Sass的3种方法

1. 使用插件：最直接的方法

2. 使用NPM脚本：平衡的解决方案

使用NPM进行Sass编译

3. 使用Gulp：全面的解决方案

为WordPress主题设置Gulp

增强您的Gulp工作流程

其他值得考虑的构建工具

如何使用Sass构建和组织WordPress开发项目

7-1 模式：复杂主题的模块化组织

以区块为中心的结构：区块和站点编辑器的现代化组织

WordPress特定Sass组织注意事项

插件兼容性组织

编辑器和后台样式

响应式设计实现

设置本地开发环境

从开发环境迁移到生产环境

创建有效的区块编辑器集成

与theme.json集成

使用Sass进行性能优化

实现关键CSS以加快加载速度

实现智能缓存控制

安全管理源映射

构建高效的团队工作流程

Sass项目的版本控制策略

小结

相关文章

评论留言

取消回复

文章目录