WordPress 中的 Sass [关闭]

Question

我想在我的一个 wordpress 项目中使用 SASS（这将成为未来项目的样板）。我希望以遵循以下标准的方式做到这一点：

• 通过 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 主题标题注释”，因为它更喜欢 // cmets
• 不编译 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 连接起来似乎很奇怪。

有什么想法吗？谢谢！

Answer 1

使用styles.css 来输出你的sass 怎么样？这就是我所做的，它解决了你的许多问题：

• 确保您使用的是子主题。
• 您可能希望在本地安装 wordpress 而不是在服务器上工作。这个link 将帮助你完成这个过程的大部分。这是绕过选择正确主题的好方法。您可以使用他的编译器将输出路径到正确的文件。我使用Koala，但有很多很棒的可供选择。
• 以部分形式（即_theme.scss、_responisve.scss、_animate.scss 等）创建您的 scss 文件。
• 创建一个styles.scssfile。
• 注入尽可能多的 scss 资源，而不是使用它们的 css。例如，Bootstrap 有自己的 scss，Font Awesome 和 Animate 也有。
• @import styles.scss 中的所有这些部分文件，并将输出定向到 style.css 或者最好是缩小（压缩）版本 - styles.min.css。
• 从您已在新 scss 文件中导入的所有入队样式表中清除您的 header.php。
• 检查并清理您的 function.php 是否相同。

而且真的没有什么其他东西了。

编辑

如果您的设计人员缺乏 SCSS 方面的经验，他们可以在 SCSS 文件中使用 CSS 进行编码，并且仍会编译为 style.min.css。当然，利用 SCSS 功能要好得多，但这是一个与所需经验和知识有关的问题。仍然实现了 SCSS 无缝编译成一个文件（style.css）。

致cale_b - “您可以创建一个“custom.scss”文件，供您的设计师使用（他们可以使用 vanilla CSS），并且最后导入，以便其样式覆盖任何其他 scss 规则”

Answer 2

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

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

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

style.css 也用作get_stylesheet_uri() 的默认输出。不过，这可以使用stylesheet_uri 过滤器进行自定义。

在我看来，Wordpress 强迫您在style.css 中包含主题信息这一事实只是糟糕的设计，因为它增加了大约 1032 个字节。这不是很多，但完全没有必要；尤其是在可以避免的情况下，因为文件大小可能是影响网站性能的最大因素。

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

---

解决方案 1

现在我们解决了这个问题，这就是解决方案！

我认为最好的方法是：

• 使用 import 和 partials（参见 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 文件包含 /* ... */ 形式的 cmets，因为主题标题位于 style.css 而不是 style.min.css
• 较小的文件大小用于样式表，因为 style.min.css 不再包含主题标题信息，因为它存储在 style.css
• 更好的网站性能：由于您的所有 SCSS 文件都被编译成一个 CSS 文件，因此发送到您服务器的 HTTP 请求数量会减少，从而提高您的整体网站性能。

缺点

• 两个 CSS 文件。没有太大的劣势，因为前端的用户只收到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;
}

还要注意 loud cmets 的使用（即/*! ... */ 而不是/* ... */）。这基本上意味着不应在 sass 的缩小版本中删除此注释。

优势

• 一个 CSS 文件
• 不太可能让 Wordpress 社区中的用户感到困惑
• 通过 sass-lint，因为评论规则暂时被禁用！
• 更好的网站性能：（与解决方案 1 相同的原因）

缺点

• 较大的文件大小用于样式表，因为编译后的 CSS 文件包含主题标题信息。不过，这只是小幅增长。

不使用 Sass 或 Grunt/Gulp 的最终用户怎么办？

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

这并不意味着您不能使用构建自动化工具。这只是意味着您从解决方案 1 或解决方案 2 编译的 CSS 文件不应缩小，因为用户无法轻松编辑文件！不幸的是，这意味着您的网站的文件大小会大得多，因此会变慢。

或者你可以有两个文件：

• website.min.css: 编译后的 SCSS 的缩小版
• website.css：编译后的SCSS的扩展版

[再一次，随意命名]

然后如果用户希望在不使用 sass 或 Grunt/Gulp 的情况下进行快速更改，那么他/她可以通过 website.css 进行更改（但是，用户还需要更改 functions.php 中正在加载的文件）

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

两全其美！

Answer 3

我将 gulp 与 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';

Answer 4

我这样做的方法是我有一个 main.css 文件，所有 SASS 都编译到该文件中，然后通过常规 CSS 导入将其导入到 style.css 中。