如何在WordPress主题中使用SCSS?

时间:2014-09-14 作者:Meschiany

使用scss最简单的方法是什么?

我尝试了wp scss插件,但它似乎对我不起作用:

在我的主题中:root:css->style。css scss->样式。scss公司

scss和css位置的设置为“/scss/”和“/css/”。

风格scss$粉红色:#7e40e4;

风格css。背景:$粉红色}

不起作用,我错过了什么?

谢谢

3 个回复
SO网友:Rarst

WordPress core本身不支持SCSS,尽管它现在实际上用于核心开发。

“插件”型解决方案透明地添加此类支持的问题在于,它们依赖于预处理器的“端口”。SCSS不是为PHP开发的,只有在第三方重新实现的情况下才能在这样的环境中运行它。虽然端口大部分工作正常,但根据我的经验,它们经常出现问题,并且在版本更新方面经常落后。

更实用的方法是在开发过程中编译您的SCS(使用本机引擎,或者为了方便而扩展它的工具),并将构建结果作为常规CSS使用。

SO网友:pixeline

我建议你从WP Bones theme 启动主题。这就是我第一次进入scss的原因。它解释了您需要了解的有关scss的所有内容,并为您直接在Wordpress的良好文件系统和scss配置中进行设置。

此外,您可能会觉得使用以下软件更舒服Codekit 处理scss文件的配置和编译任务。有free alternatives (但我发现Codekit值得这么小的投资)。

SO网友:Casey Milne

如果您正在寻找基于PHP代码的方法,那么有一个用于编译SASS的SASS(SCSS)PHP包,可在https://scssphp.github.io/scssphp/. 它还提供了CLI命令,但其主要方法是用于动态编译。我在一个自定义主题项目中选择了这种方法,我想在其中使用SCSS。当然,我不想在每次加载页面时都编译SCS,所以我所做的是设置一个自定义页面模板页面编译。php的主题,并在其中运行编译器。然后,输出像任何普通CSS文件一样排队。无论何时我们想要重新编译,只要打开/编译,它就会运行并更新所有CSS。在生产中,我们可能会开始使用CLI构建。

我曾想过但从未研究过的另一种方法是找到一个编译器工具并使用它。可能有几十种选择。就与原始问题的相关性而言,就像许多关于WordPress主题开发的问题一样,重要的是要记住,虽然WP本身并没有对此提供直接支持,但您可以使用任何想要创建输出CSS的工具,只要这样做,您就能够编写SASS代码,并最终将其作为常规CSS排入WP主题的队列。

因为我喜欢使用PHP(我的老朋友PHP),所以我更喜欢使用PHP过程的编译器,而不是构建过程,因为我觉得它更熟悉,设置只需要几行代码,如果PHP级别出现任何问题,我知道如何轻松调试它。构建过程总是让我感到不确定,如果它们中断了,我真的不知道它们是如何工作的。

结束