今天在捣鼓 Chrome 设置，突然看到一个 Live Sass ，这是什么鬼，难道 Chrome 原生支持 Sass 了，于是忍不住测试一下，原来是空欢喜一场。
不过在 google 的过程中发现了一张有趣的图，就是下面这张：
live-sass.gif
有木有兴奋？当我第一眼看到这张图的时候，第一个想到的就是效率！大大的提高写样式的效率。为什么这么说呢，因为本人习惯直接在浏览器里调试前端的东西，所以调试工具里的 Elements -> Styles和 Console是我最常用的功能。如果在Styles里写的样式能直接保存在本地，也就省得我来回拷贝了，特别当样式变动比较大时，有时还会忘了改了的哪些东西。
其实以前就知道chrome 的 workspace 功能，不过那时候还是有一些限制，比如只能映射 css，而不支持 less、sass。但是现在几乎应该没人直接写css了吧！所以对我来说没什么用。
不过看到上面那张图后，我发现，chrome 可以支持 sass 了,当我们选择到元素后，直接就识别到 sass 文件了，而不再是sass 编译后的 css 文件，这一切都仰赖于 sourcemap。
目前我们用的还是less，看到这个功能后，后面果断要转sass了，改动不大，改个后缀名，在批量替换下变量就好了。
俗话说，讲的再多，不如举个栗子。于是自己动手写了个demo。写这个demo还有一个核心的目的，就是验证该功能是否支持 @import 'part.sass'。如果不能识别import，那其实也没什么大用。
最后实验结果是：支持识别import引入的文件。
下面是实验记录：
liveSassDemo.gif
live sass 设置：
setLiveSass.gif
网友评论