css - WordPress 中的 Sass

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题.

5年前关闭。




Improve this question




我想在我的一个 wordpress 元素中使用 SASS(这将是 future 元素的样板)。我希望以遵循以下标准的方式做到这一点:

通过 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 连接起来似乎很奇怪。

有任何想法吗？谢谢!

Answer 1

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

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

在 Wordpress 中，style.css需要文件才能查看 中的主题信息后端 .
style.css也用作 get_stylesheet_uri() 的默认输出.但是，这可以使用 stylesheet_uri 进行自定义筛选。

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

这与 Drupal CMS 不同，在 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欲了解更多信息

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

然后你可以运行 sass-lint在您的 sass 文件中，但仍然在您的 style.css 中有您的主题信息，两全其美。

优势

通过 sass-lint ，因为没有一个 sass 文件包含 /* ... */ 形式的注释。 , 因为主题标题在 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 Comment 规则:

// 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 的最终用户呢？

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

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

或者，您可以有两个文件:

website.min.css : 已编译的 SCSS 的缩小版

website.css : 已编译 SCSS 的扩展版本

[再次，随意命名]

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

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

两全其美的!