时间戳

首页 > 解决方案 > 编辑 SASS 文件 (.SCSS)

sass - 编辑 SASS 文件 (.SCSS)

问题描述

我是 SASS 的初学者！

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

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

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

我要做的就是更改网站的样式！

谢谢

标签： sassgulp-sass

解决方案

您需要确保 SASS 已安装在您的机器上——查看官方安装链接。

安装 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 文件的更改。

推荐阅读