如何在浏览器上即时编辑和测试 SCSS？
How do you edit and test SCSS instantly on browser?
尽管很酷的功能 SCSS/Compass 被引入到我的生产程序中，但它仍然让我有点困扰，因为编辑一行 css 并在浏览器上测试它们。 （这主要是我的团队所说的，但负责开发工作流程，我不能忽视这一点。）
要具体说明 'long process' 需要什么，它们是：
- 正在将检查器（例如 Chrome 开发人员工具）中的 'tested' 行复制到文本编辑器以更新 SCSS 文件（超过几秒）
- 正在将已编译的 CSS 文件上传到远程服务器（4+ 秒）
- 正在刷新浏览器进行测试（亚秒级）
每次都重复这个让我很烦。
至于为什么我这么烦他们，在SCSS之前我曾经这样做过：
- 在检查器上编辑一行（它会自动更新本地文件，这也会导致浏览器从本地 css 文件更新样式）（亚秒级，即使没有任何鼠标点击或键盘敲击）
我正在考虑在 Docker 之上在本地构建服务器以模拟与生产服务器几乎相同的环境，这样 2.（将文件上传到服务器）部分就可以解决了。
因为我有时只编写代码风格，所以我可以使用它，但是每天从事这些工作的人感到非常沮丧，以至于他们不愿意学习 SCSS。 （我认为这是荒谬的，因为他们仅仅通过节省一堆可重用的行等就可以节省大量时间。但是，他们还必须保留给定项目允许他们在学习 SCSS 时花费的时间。）
今天似乎没有人手动输入纯 CSS 代码，所以这个问题可能有点过时了，可能这就是为什么我没能很成功地找到有人抱怨这个的原因。但是我认为了解任何人的方法或只是想一想这很酷。有什么推荐吗？如果答案是 "Just get used it."，那么我也可以使用它。
假设你可以设置一个环境 sass "watching" 文件的变化并生成源映射，你可以制作这样的工作流程：
- 从 chrome
中编辑源 sass 文件
- Sass 生成 css 文件
- css 文件重新加载，浏览器获取更改。
https://developers.google.com/web/tools/setup/setup-preprocessors
我个人不喜欢这个工作流程，因为通常最终代码比较杂乱，但对于代码中的小改动，它可以工作。
我在 chrome v67 上测试过，我的配置是这样的：
- 我有一个 sass 构建观察器（配置为生成源映射）
- 我已将浏览器同步配置为自动 reload/inject CSS (https://browsersync.io/)
- 我在 devtools 设置中选中了启用 CSS 源映射复选框
- 我在 chrome 上设置了一个工作区，它指向我的 sass 文件夹
以及工作流程：
- 转到“元素”选项卡并检查一些元素
- 跳转到源面板
- 编辑源文件（chrome）
- 保存文件
It seems like nobody is typing pure CSS code by hand today
嗯，我不知道，我认为越来越多的人回去写纯 CSS。
尽管很酷的功能 SCSS/Compass 被引入到我的生产程序中，但它仍然让我有点困扰，因为编辑一行 css 并在浏览器上测试它们。 （这主要是我的团队所说的，但负责开发工作流程，我不能忽视这一点。）
要具体说明 'long process' 需要什么，它们是：
- 正在将检查器（例如 Chrome 开发人员工具）中的 'tested' 行复制到文本编辑器以更新 SCSS 文件（超过几秒）
- 正在将已编译的 CSS 文件上传到远程服务器（4+ 秒）
- 正在刷新浏览器进行测试（亚秒级）
每次都重复这个让我很烦。
至于为什么我这么烦他们，在SCSS之前我曾经这样做过：
- 在检查器上编辑一行（它会自动更新本地文件，这也会导致浏览器从本地 css 文件更新样式）（亚秒级，即使没有任何鼠标点击或键盘敲击）
我正在考虑在 Docker 之上在本地构建服务器以模拟与生产服务器几乎相同的环境，这样 2.（将文件上传到服务器）部分就可以解决了。
因为我有时只编写代码风格，所以我可以使用它，但是每天从事这些工作的人感到非常沮丧，以至于他们不愿意学习 SCSS。 （我认为这是荒谬的，因为他们仅仅通过节省一堆可重用的行等就可以节省大量时间。但是，他们还必须保留给定项目允许他们在学习 SCSS 时花费的时间。）
今天似乎没有人手动输入纯 CSS 代码，所以这个问题可能有点过时了，可能这就是为什么我没能很成功地找到有人抱怨这个的原因。但是我认为了解任何人的方法或只是想一想这很酷。有什么推荐吗？如果答案是 "Just get used it."，那么我也可以使用它。
假设你可以设置一个环境 sass "watching" 文件的变化并生成源映射，你可以制作这样的工作流程：
- 从 chrome 中编辑源 sass 文件
- Sass 生成 css 文件
- css 文件重新加载，浏览器获取更改。
https://developers.google.com/web/tools/setup/setup-preprocessors
我个人不喜欢这个工作流程，因为通常最终代码比较杂乱，但对于代码中的小改动，它可以工作。
我在 chrome v67 上测试过，我的配置是这样的：
- 我有一个 sass 构建观察器（配置为生成源映射）
- 我已将浏览器同步配置为自动 reload/inject CSS (https://browsersync.io/)
- 我在 devtools 设置中选中了启用 CSS 源映射复选框
- 我在 chrome 上设置了一个工作区，它指向我的 sass 文件夹
以及工作流程：
- 转到“元素”选项卡并检查一些元素
- 跳转到源面板
- 编辑源文件（chrome）
- 保存文件
It seems like nobody is typing pure CSS code by hand today
嗯，我不知道，我认为越来越多的人回去写纯 CSS。