如何在浏览器上即时编辑和测试 SCSS？

Question

尽管 SCSS/Compass 很酷的功能引入了我的生产程序，但我仍然对编辑一行 css 并在浏览器上测试它们需要多长时间感到有点困扰。 （这主要是我的团队所说的，但我负责开发工作流程，我不能忽视这一点。）

要具体说明它所采取的“漫长过程”，它们是：

1. 将“已测试”行从检查器（例如 Chrome 开发人员工具）复制到文本编辑器以更新 SCSS 文件（超过几秒钟）
2. 将编译后的 CSS 文件上传到远程服务器（4 秒以上）
3. 刷新浏览器进行测试（亚秒级）

而且每次都重复这件事让我很烦。

至于为什么我对它们如此困扰，在 SCSS 之前我曾经这样做过：

1. 在检查器上编辑一行（它会自动更新本地文件，这也会导致浏览器从本地 css 文件更新样式）（亚秒级，即使没有任何鼠标点击或键盘敲击）

---

我正在考虑在本地构建服务器，在 Docker 之上模拟与生产服务器几乎相同的环境，这样 2.（上传文件到服务器）部分就可以解决了。

由于我有时只编写样式代码，我可以使用它，但是每天都在编写样式的人非常沮丧，以至于他们还不愿意学习 SCSS。 （我认为这很荒谬，因为他们仅通过保存一堆可重复使用的行等就可以节省大量时间。但是他们还必须保留给定项目允许他们在学习 SCSS 时花费的时间。）

今天似乎没有人手动输入纯 CSS 代码，所以这个问题可能有点过时了，可能这就是为什么我没能成功找到有人抱怨这个问题的原因。但是，我认为了解任何人的方法或只是考虑一下这一点很酷。有什么推荐吗？如果答案是“使用它。”，那么我也可以使用它。

Answer 1

假设你可以设置一个环境，sass“监视”文件的变化并生成一个源映射，你可以做一个这样的工作流：

• 在 chrome 中编辑源 sass 文件
• Sass 生成 css 文件
• css 文件被重新加载，浏览器会接受更改。

https://developers.google.com/web/tools/setup/setup-preprocessors

我个人不喜欢这种工作流程，因为通常最终的代码比较杂乱无章，但对于代码中的小改动，它可以工作。

我在chrome v67上测试过，我的配置是这样的：

• 我有一个 sass 构建观察器（配置为生成源映射）
• 我已将 browsersync 配置为自动重新加载/注入 CSS (https://browsersync.io/)
• 我在 devtools 设置中选中了 Enable CSS source maps 复选框
• 我在 chrome 上设置了一个工作区，指向我的 sass 文件夹

以及工作流程：

• 转到“元素”选项卡并检查一些元素
• 跳转到源面板
• 编辑源文件（在 chrome 上）
• 保存文件

今天似乎没有人手动输入纯 CSS 代码

好吧，我不知道，我认为越来越多的人会重新编写纯 CSS。