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

Question

尽管SCSS / Compass很酷的功能已经进入我的生产程序，但它仍然让我觉得如何 long 编辑一行css并在浏览器上测试它们。 （这主要是我的团队所说的，但负责开发工作流程，我不能忽视这一点。）

具体说明它正在采取什么样的“漫长过程”，它们是：

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

每次重复这个都是困扰我的。

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

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

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

由于我有时只编码风格，我可以使用它，但是每天为它们工作的人都会感到非常沮丧，以至于他们还不愿意学习SCSS。 （我认为通过保存一堆可重复使用的线路来节省大量时间是荒谬的。但是他们还必须保留项目允许他们在学习SCSS时花费的时间。）

似乎没人在今天手工输入纯CSS代码，所以这个问题可能有点过时了，也许这就是为什么我找不到抱怨这个问题的人并不是很成功。但是我认为知道任何人的方法或只是想到这个很酷。有什么建议？如果答案是“Just get used it。”，那么我也可以使用它。

Answer 1

假设你可以设置一个环境，让他们“观察”文件的变化并生成源地图，你就可以建立一个这样的工作流程：

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

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

我个人不喜欢这个工作流程，因为通常情况下，最终代码更无组织，但对于代码中的小变化，它可以工作。

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

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

工作流程：

• 转到“元素”标签并检查某个元素
• 跳转到源面板
• 编辑源文件（在chrome上）
• 保存文件

  

似乎没人在今天手工输入纯CSS代码

嗯，我不知道，我认为越来越多的人会回来编写纯CSS。