Sass 在 WordPress

问题描述

我想在我的一个 WordPress 项目中使用 SASS(这将是未来项目的样板) 。我希望以遵循以下标准的方式：

• Passess sass-lint

• 遵循 Wordpress 标准 (例如主题标题)

• 清洁，一致& 容易维护

我有几个想法，但没有一个符合上述标准。

1. 删​​除 style.css，并单独使用 Sass

/index.php
/... other wordpress files ...
/assets/sass/main.scss
/assets/sass/...other sass files...

运行 sass 后，将在根目录中创建 style.css 。

优点：

• 一致性

• 容易维护

缺点：

• SCSS-Lint 不喜欢 「WordPress 主题标题评论」，因为它更喜欢//评论

• 在没有编译 sass 的情况下，不可能在 WordPress 后端中选择主题

2. 同时使用 style.css 和 Sass

/index.php
/style.css
/...other wordpress files...
/assets/sass/main.scss
/assets/sass/... other sass files...

优点：

• 基本上解决了 (1)

• 即使不应该是这样; 快速更改可以轻松添加到 style.css 没有任何工具

缺点：

• 前后矛盾

• 冗余

• 需要多个 CSS 请求 (一个用于 style.css，一个用于编译的 sass)

另外我最大的问题是：在哪里放编译的 SASS？将其与 style.css 连接似乎相当奇怪。

有任何想法吗？谢谢！

最佳解决方案

为什么我们需要”style.css”？

在给出我的解决方案之前，我认为重要的是要了解我们在 Wordpress 中需要 style.css 的原因

在 Wordpress 中，需要 style.css 文件才能查看后台中的主题信息。

style.css 也用作 get_stylesheet_uri()的默认输出。但是，可以使用 stylesheet_uri 过滤器进行定制。

在我看来，Wordpress 强制您在 style.css 中拥有主题信息的事实只是糟糕的设计，因为它增加了约 1032 个字节。这不是很多，但完全不必要; 特别是如果可以避免，文件大小可能是影响站点性能的最大因素。

这与 Drupal CMS 不同，您的主题信息存储在诸如 yourtheme.info 的单独文件中，因此永远不会暴露给最终用户

---

解决方案 1

现在我们得到了，这里是解决方案！

我认为最好的办法是：

• 通过使用导入和部分 (请参阅 http://sass-lang.com/guide#topic-5) 将所有 sass 文件编译成单个文件 (如 style.min.css) 。随意命名其他东西。

• 将所有您的 WordPress 主题标题留在 style.css 中。

例如：

style.css 文件

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange
Text Domain: twentythirteen

Use it to make something cool, have fun, and share what you've learned with others.
*/

style.min.css

p{color:red;}h1{color:blue;} ...

然后，您可以使用 functions.php 文件中的以下代码确保在前端的每个页面上添加的新样式表：

function theme_name_stylesheets() {
    wp_enqueue_style('style-name', get_template_directory_uri() . '/style.min.css');
}

add_action( 'wp_enqueue_scripts', 'theme_name_stylesheets' );

有关更多信息，请参阅：https://codex.wordpress.org/Function_Reference/wp_enqueue_style

因此，当您在文档的 head 中运行 wp_head()时，将自动添加正确的 CSS 文件。

然后，您可以在您的 sass 文件上运行 sass-lint，但仍然在 style.css 中提供您的主题信息，这两个世界都是最好的。

优点

• 通过 sass-lint，因为没有一个 sass 文件包含/* ... */形式的注释，因为主题头在 style.css NOT style.min.css

• 样式表较小的文件大小，因为 style.min.css 不再包含主题头信息，因为它存储在 style.css

• 更好的网站性能：由于所有 SCSS 文件都被编译成单个 CSS 文件，所以发送到服务器的 HTTP 请求数量减少，从而提高了整体站点性能。

缺点

• 两个 CSS 文件。没有太多的缺点，因为 front-end 上的用户只发送了 style.min.css，而不是 style.css

• 可能会混淆 Wordpress 社区中的用户。大多数 Wordpress 用户希望您的样式在 style.css 。但是，我怀疑这将是一个很大的问题 (特别是如果你不发布你的主题)，也可以通过一个简单的评论来纠正。

解决方案 2

您的问题的另一个解决方案是使用以下方法临时禁用 scss-lint 注释规则：

// scss-lint:disable Comment
/*!
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange
Text Domain: twentythirteen

Use it to make something cool, have fun, and share what you've learned with others.
*/
// scss-lint:enable Comment
p {
  font-size: 16px;
}

还要注意使用响亮的评论 (即/*! ... */而不是/* ... */) 。这基本上意味着这个评论不应该在最简化的 sass 版本中删除。

优点

• 一个 CSS 文件

• 不太可能在 Wordpress 社区中混淆用户

• 通过 sass-lint，因为评论规则暂时被禁用！

• 更好的网站性能 (与解决方案 1 相同)

缺点

• 较大的样式表的文件大小，因为编译的 CSS 文件包含主题头信息。这只是一个小的增长。

那些没有使用 Sass 或 Grunt /Gulp 的 end-users 怎么样？

从您提到的另一个评论中，您表示希望用户能够在不安装 sass 或构建自动化工具的情况下更改小事情。

这并不意味着您不能使用构建自动化工具。这意味着您从解决方案 1 或解决方案 2 编译的 CSS 文件不应该被细化，因为用户不能轻易地编辑文件！不幸的是，这意味着你的网站在文件大小上会更大，因此结果会减慢。

或者，您可以有两个文件： – website.min.css：编译的 SCSS 的最小化版本 – website.css：编译 SCSS 的扩展版本

[再次，按你的意愿命名]

那么如果用户希望在没有 sass 或 grunt /gulp 的情况下进行快速更改，那么他/她可以这样做到 website.css(但是，用户还需要更改 functions.php 中加载的文件)

另外，有经验的用户谁有 sass 的经验或用户不想进行任何更改，不必妥协，因为他们仍然可以利用快速最小化的 website.min.css 版本！

两全其美的！

次佳解决方案

如何使用 styles.css 输出你的 sass？这是我做的，它已经解决了你的许多问题：

• 确保你在一个小孩主题工作。

• 您可能希望在本地安装 wordpress 而不是在服务器上工作。该 link 将帮助您大部分此过程。这是选择正确主题的好方法。您可以使用他的编译器将输出路径到正确的文件。我使用 Koala，但有一些伟大的在那里可供选择。

• 以部分形式 (即_theme.scss，_responisve.scss，_animate.scss 等) 创建您的 scss 文件。

• 创建一个 styles.scss 文件。

• 注入尽可能多的 scss 资源，而不是使用他们的 CSS 。例如，Bootstrap 拥有自己的 scss，Font Awesome 和 Animate 也是如此。

• @import 您的 styles.scss 中的所有这些部分文件，并将输出引导到 style.css，或者最好是一个 minified(压缩的) 版本，而不是 style.min.css 。

• 清理您 header.php 从您已经在您的新的 scss 文件中导入的所有被标记的样式表。

• 检查并清理您的 function.php 相同。

真的没有太多的余地。

编辑

如果您的设计师缺乏 SCSS 的经验，他们可以在 SCSS 文件中编写 CSS，并且仍然会作为 style.min.css 进行编译。自然地，利用 SCSS 功能要好得多，但这是与需要经验和知识有关的问题。将 SCSS 无缝编译成一个文件 (style.css) 仍然可以实现。

信用于 cale_b – 「您可以创建一个”custom.scss” 文件，该文件适用于您的设计人员 (并且可以使用 vanilla CSS)，并且导入 LAST，因此它的样式会覆盖任何其他 scss 规则」

第三种解决方案

我使用 gass 与 sass 和 wordpress，我输出编译的 sass 到 style.css 这里是我的正常工作流程：

gulpfile.js

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    wiredep = require('wiredep').stream,
    $ = gulpLoadPlugins(),
    browserSync = require('browser-sync');
    p = require('./package.json');

gulp.task('sass', function (){
    return gulp.src('scss/**/*.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass())
    .pipe($.concat('style.css'))
    .pipe($.autoprefixer())
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

gulp.task('sass-prod', function (){
    gulp.src('scss/**/*.scss')
    .pipe($.sass())
    .pipe($.cssmin())
    .pipe($.concat('style.css'))
    .pipe($.autoprefixer())
    .pipe(gulp.dest('.'))
});

main.scss

/*!
Theme Name: example
Theme URI: http://example.com
Author: xxxxxx
Author URI: xxxx
Description: xxxxx
Version: 1.0
*/

@import 'vars', 'typography', 'header', 'layout', 'proyectos', 'forms', 'libs';

参考文献

• Sass within WordPress [closed]

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。