WordPress中的Sass \[关闭\]

CSS的 CSS

小哥Pro梅

2020-03-23

我想在我的一个wordpress项目中使用SASS(这将是将来项目的样板)。我希望按照以下标准进行操作:

  • Passess sass-lint
  • 符合Wordpress标准(例如主题标题)
  • 清洁,一致且易于维护

我有几个想法,但是没有一个符合上述条件。

1.卸下style.css并单独使用Sass

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

运行后sassstyle.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似乎很奇怪。

有任何想法吗?谢谢!

第2596篇《WordPress中的Sass \[关闭\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
樱小胖Mandy 2020.03.23

如何使用styles.css输出您的Sass?这就是我所做的,它已经解决了您的许多问题:

  • 确保您正在使用儿童主题。
  • 您可能需要在本地安装wordpress,而不是在服务器上工作。链接将帮助您完成大部分此过程。这是解决正确主题的好方法。您可以使用编译器将输出路径到正确的文件。我使用Koala,但是有很多很棒的东西可供选择。
  • 在部分形式创建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”文件,该文件供设计人员使用(他们可以使用原始CSS),并且导入了LAST,因此它的样式将覆盖所有其他scss规则”

Stafan 2020.03.23

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android