Css WordPress中的Sass

我想在我的一个wordpress项目中使用SASS（这将是未来项目的样板）。我希望这样做符合以下标准：

• 皮棉
• 遵循Wordpress标准（例如主题标题）
• 清洁、一致且易于维护

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

1.删除

style.css

并单独使用Sass 运行

sass

后，将在根目录中创建

style.css

优点：

• 一致性
• 易于维护

缺点：

• SCSS Lint不喜欢“WordPress主题标题注释”，因为它更喜欢

  /

  注释
• 如果不编译sass，就不可能在WordPress后端选择主题

2.同时使用

样式.css

和Sass 优点：

• 基本上解决了（1）的缺点
• 即使不应该这样；无需任何工具，即可轻松将快速更改添加到

  style.css

缺点：

• 不一致
• 冗余
• 需要多个CSS请求（一个用于

  style.CSS

  ，一个用于已编译的sass）

我这里最大的问题是：将编译后的SASS放在哪里？将它与

style.css

连接起来似乎相当奇怪

---

有什么想法吗？谢谢

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

• 确保您正在使用子主题
• 您可能希望在本地安装wordpress，而不是在服务器上。这将帮助您完成此过程的大部分工作。这是一个选择正确主题的好方法。您可以使用编译器将输出路径设置为正确的文件。我用过，但是有很多很好的选择
• 以部分形式创建scss文件（即

  \u theme.scss

  ，

  \u responisve.scss

  ，

  \u animate.scss

  等）
• 创建一个

  styles.scss

  文件
• 注入尽可能多的scss资源，而不是使用它们的css。例如，Bootstrap有自己的SCS，Font Awesome和Animate也有自己的SCS

• @将所有这些部分文件导入
  style.scss
  中，并将输出定向到
  style.css
  或最好是缩小（压缩）版本，而不是-
  style.min.css

• 从新的scss文件中导入的所有enqued样式表中清理

  header.php

• 检查并清理

  function.php

  中的相同内容

而且真的没剩下多少了

编辑

如果您的设计人员缺乏SCSS方面的经验，他们可以在SCSS文件中使用CSS编码，并且它仍将编译为style.min.CSS。当然，利用SCSS特性要好得多，但这是一个与拥有所需经验和知识相关的问题。仍然可以将SCS无缝编译到一个文件（style.css）中

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

为什么我们需要“style.CSS”？ 在给出我的解决方案之前，我认为在Wordpress中详细说明我们需要

style.css

的原因是很重要的

在Wordpress中，需要

style.css

文件才能在后端查看主题信息

style.css

也用作

get\u stylesheet\u uri（）

的默认输出。但是，这可以使用

样式表\u uri

过滤器进行自定义

在我看来，Wordpress强迫您将主题信息设置为

style.css

的事实是糟糕的设计，因为它增加了大约1032个字节。这不是很多，但完全没有必要；尤其是如果可以避免，因为文件大小可能是影响站点性能的最大因素

这与Drupal CMS不同，Drupal CMS将主题信息存储在一个单独的文件中，例如

yourtheme.info

，因此不会向最终用户公开

---

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

我认为最好的办法是：

• 通过使用导入和部分，将所有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.
*/

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

style.min.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.
*/

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' );

有关更多信息，请参阅

因此，当您在文档的

head

中运行

wp\u head（）

时，它将自动添加正确的CSS文件

然后，您可以在您的sass文件上运行

sass lint

，但主题信息仍保留在

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.
*/

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

• 传递sass lint，因为没有任何sass文件包含形式为

  /**/

  ，因为主题标题是

  style.css

  而不是

  style.min.css

• 样式表的较小文件大小，因为

  style.min.css

  不再包含主题标题信息，因为主题标题信息存储在

  style.css

• 更好的站点性能：由于所有的SCSS文件都编译成一个CSS文件，因此发送到

  /*!
  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';