编辑 SASS 文件 (.SCSS)

Question

我是 SASS 的初学者！

我有一个使用 SASS 的自定义构建的 WP 站点。 当我尝试编辑 .SCSS 文件中的任何样式时，这些更改不会显示在前端。

我正在使用带有“Live SASS 编译器”插件的 VS Code 编辑器，但当我进行更改时，它们仍然不会反映在前端。

我显然在这里遗漏了一些东西，但真的不知道从哪里开始。

我想做的就是改变网站的样式！

谢谢

Answer 1

您需要确保在您的机器上安装了 SASS - 查看offical install link。

安装 SASS 后，此答案的其余部分将涉及使用命令行和一些基本命令。

假设你的 CSS 和 SCSS/SASS 文件夹是这样排列的：

C:/Users/Me/development

/wordpress/wp-content/themes/my-theme/assets/css
/wordpress/wp-content/themes/my-theme/assets/scss

打开您喜欢的命令行界面 - 例如 PowerShell 或命令提示符。首先，通过输入以下命令并回车检查 SASS 是否已安装：

sass --version

您应该得到一个号码 - 如果没有，您将需要再次检查安装说明并确保您正确执行了所有操作。

如果按预期工作，您现在需要导航到包含您的资产的目录。当你加载你的命令行界面时，你应该在你的用户或主目录中——在这个例子中是C:/Users/Me。如果使用 PowerShell，您将在闪烁的插入符号之前看到您的当前工​​作目录。

您可以使用 更改目录 命令 - cd - 导航到您的主题资产文件夹。使用上面的示例文件路径：

cd development/wordpress/wp-content/themes/my-theme/assets

进入此目录后，您可以运行 SASS --watch 命令来观察目录的更改并在保存时编译：

sass --watch scss:css

上面监视SCSS文件夹，把编译好的CSS放到CSS文件夹中。完成编辑后，在终端（命令行）中按 CTRL/CMD + C，然后按 Y 停止查看 SCSS 文件的更改。