今天在捣鼓 Chrome 设置,突然看到一个 Live Sass ,这是什么鬼,难道 Chrome 原生支持 Sass 了,于是忍不住测试一下,原来是空欢喜一场。
不过在 google 的过程中发现了一张有趣的图,就是下面这张:
有木有兴奋?当我第一眼看到这张图的时候,第一个想到的就是效率!大大的提高写样式的效率。为什么这么说呢,因为本人习惯直接在浏览器里调试前端的东西,所以调试工具里的 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
引入的文件。
下面是实验记录:
live sass 设置: