PROSAGA码农传奇-流程引擎-如何在浏览器上即时编辑和测试SCSS？

<div class =“post-text”itemprop =“text”>
  
    假设您可以设置一个环境，让他们“观察”文件的变化并生成源地图，您可以创建如下工作流程：
  
  <UL>
    <LI>
      从chrome中编辑源sass文件
    </LI>
    <LI>
      Sass生成css文件
    </LI>
    <LI>
      重新加载css文件，浏览器将获取更改。
    </LI>
  </UL>
  
    <a href="https://developers.google.com/web/tools/setup/setup-preprocessors" rel="nofollow noreferrer">
      https://developers.google.com/web/tools/setup/setup-preprocessors
    </A>
  
  
    我个人不喜欢这个工作流程，因为通常，最终代码更无组织，但对于代码中的小变化，它可以工作。
  
  
    我在chrome v67上测试过，我的配置是这样的：
  
  <UL>
    <LI>
      我有一个sass构建观察器（配置为生成源映射）
    </LI>
    <LI>
      我有browserync配置为自动重新加载/注入CSS（
      <a href="https://browsersync.io/" rel="nofollow noreferrer">
        https://browsersync.io/
      </A>
      ）
    </LI>
    <LI>
      我在devtools设置上选中了启用CSS源映射复选框
    </LI>
    <LI>
      我在chrome上设置了一个工作空间，指向我的sass文件夹
    </LI>
  </UL>
  
    而工作流程：
  
  <UL>
    <LI>
      转到Elements选项卡并检查一些元素
    </LI>
    <LI>
      跳转到源面板
    </LI>
    <LI>
      编辑源文件（在chrome上）
    </LI>
    <LI>
      保存文件
    </LI>
  </UL>
  <BLOCKQUOTE>
    
      似乎今天没有人手动输入纯CSS代码
    
  </BLOCKQUOTE>
  
    好吧，我不知道这一点，我认为越来越多的人回去编写纯CSS。
  
</DIV>