Sass在WordPress中

Question

我想在我的一个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似乎相当奇怪.

有任何想法吗？谢谢!

Answer 1

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

在我提出解决方案之前,我认为style.css在Wordpress中解决我们需要的原因非常重要

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

style.css也用作默认输出get_stylesheet_uri().但是,这可以使用stylesheet_uri过滤器进行自定义.

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

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

解决方案1

现在我们已经解决了这个问题,这是解决方案!

我认为最好的方法是:

• style.min.css使用导入和部分将所有sass文件编译为单个文件(例如)(请参阅http://sass-lang.com/guide#topic-5).随意将其他名称命名.
• 保留所有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.cssNOT中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;
}

还要注意使用响亮的评论(即/*! ... */代替/* ... */).这基本上意味着不应该在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)

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

两全其美的!

Answer 2

如何使用styles.css输出你的sass？这就是我所做的,它解决了你的许多问题:

• 确保您正在以儿童为主题.
• 您可能希望使用wordpress的本地安装而不是服务器上.此链接将帮助您完成此过程的大部分内容.这是一个选择正确主题的好方法.您可以使用he编译器将输出路径到正确的文件.我使用考拉,但有很多伟大的可供选择.
• 在部分形式创建SCSS文件(即_theme.scss,_responisve.scss,_animate.scss,等).
• 创建一个styles.scss文件.
• 注入尽可能多的scss资源而不是使用他们的CSS.例如,Bootstrap有自己的scss,Font Awesome和Animate也是如此.
• @import所有这些部分文件都在您styles.scss的输出中,style.css或者最好是缩小(压缩)版本而不是 - styles.min.css.
• 清除header.php已在新scss文件中导入的所有已加工样式表.
• 检查并清理你function.php的相同.

它真的没有剩下的东西了.

编辑

如果您的设计人员缺乏SCSS经验,他们可以在SCSS文件中编写CSS代码,它仍然可以编译为style.min.css.当然,利用SCSS功能要好得多,但这是与所需经验和知识相关的问题.仍然实现了将SCSS无缝编译到一个文件(style.css)中.

CREDIT TO cale_b - "你可以创建一个"custom.scss"文件,供你的设计师使用(并且他们可以使用vanilla CSS),并且是最后导入的,因此它的样式会覆盖任何其他scss规则"

Answer 3

我使用sass和wordpress gulp,我将编译后的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';