较新版本的sass(3.3+)支持source-map功能，可以配合谷歌浏览器或者livestyle来映射查找对应的样式。

要生成source-map可以在grunt中使用 grunt-contrib-sass 插件，只要不在options中配置 ourcemap:'none' 便默认在编译sass时自动生成匹配的.map文件：

下面是说说如何在谷歌中开启映射sass文件的功能，也当作给自己写一个备忘。

首先是在地址栏输入 chrome://flags  进入实验功能配置页面，我们找到 “启用开发者工具实验” 并点击 “启用” 链接：

然后重启Chrome。打开开发者工具（ctrl+shit+I），点击该栏右上方的齿轮图标（setting按钮）：

在Genneral选项卡上，确保勾选上了“Enable CSS source maps”即可：

稍旧一点的Chrome可能还需要到Experiments选项卡中勾选上“Support for Sass”，但新版的谷歌浏览器已经取消了这一项。

之后试试再用Chrome开发者工具检测元素CSS样式时，会发现它已经能顺利帮你映射到对应的sass文件上了（即使你的css文件是压缩的）：

完工~共勉~

用chrome来映射查找样式对应的sass的更多相关文章

  1. chromedriver与chrome版本映射列表

    chromedriver与chrome版本映射列表: chromedriver版本 支持的Chrome版本 v2.30 v58-60 v2.29 v56-58 v2.28 v55-57 v2.27 v ...

  2. Python3 ChromeDriver与Chrome版本映射表（更新至v2.43）

    Python3 ChromeDriver与Chrome版本映射表(更新至v2.43) ChromeDriver下载链接:http://chromedriver.storage.googleapis.c ...

  3. Chrome中输入框默认样式移除

    Chrome中输入框默认样式移除 在chrome浏览器中会默认给页面上的输入框如input.textarea等渲染浏览器自带的边框效果 IE8中效果如下: Chrome中效果如下:   这在我们未给输 ...

  4. 爬虫--selenium之 chromedriver与chrome版本映射表（最新至v2.46版本chromedriver）

    本文主要整理了selenium的chromedriver与chrome版本映射表,并且持续更新中..... 1.selenium之 chromedriver与chrome版本映射表(最新至v2.46版 ...

  5. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持，技巧：要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

  6. 修改chrome浏览器默认css样式的方法

    最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的 ...

  7. 在ie和chrome浏览器中滚动条样式的设置

    1.IE下设置滚动条样式的属性 scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色(包括箭 ...

  8. selenium-----chromedriver与chrome版本映射

    chromedriver下载地址:http://chromedriver.storage.googleapis.com/index.html chromedriver版本 支持的Chrome版本 v2 ...

  9. chrome的input默认样式黄色背景以及选中加粗的边框处理

    问题描述: chrome输入用户名和密码,然后浏览器自己有记忆功能,等再次登录的时候,他会显示chrome默认的黄色背景色,还有选中时周围会有很粗的边框 解决方案: 去掉黄色背景,给input添加au ...

随机推荐

  1. Linux下免安装版sublime text 3显示图标

    执行如下命令 sudo vim /usr/share/applications/sublime_text_3.desktop 根据个人存放位置添加如下内容信息: [Desktop Entry] Enc ...

  2. while 循环 。。

    这是一个可以循环到天荒地老的循环: 如果while 为真就一直循环下去: count=0 while True: count+=1 if count>50 and count<60: co ...

  3. ipad上自定义view的旋转适配

    ios8横屏时宽高会自动转换,但是ios7不是 CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width; CGFloat scree ...

  4. Android资源站

    用这个帖子记录下看到的好的android资源站 1.各种资源:http://appxcode.com/ 2.图标 2.1 http://www.easyicon.net 2.2 http://www. ...

  5. pycharm快捷键、配置virtualenv环境，配置django调试，配置远程调试

    pycharm安装和首次使用 http://blog.csdn.net/chenggong2dm/article/details/9365437 快捷键: 找文件.代码.引用相关 1.双击shift ...

  6. clientX .offsetX .screenX x 的区别

    clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自 ...

  7. （RMQ版）LCA注意要点

    inline int lca(int x,int y){ if(x>y) swap(x,y); ]][x]]<h[rmq[log[y-x+]][y-near[y-x+]+]])? rmq[ ...

  8. 初探React-Native

    props 大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性). 以常见的基础组件Image为例,在创建一个图片时,可以传入一个名为source的prop来指定 ...

  9. web.xml配置错误导致applicationContext.xml配置重复加载

    web.xml相关配置 <context-param><param-name>log4jRefreshInterval</param-name><param- ...

  10. mac 之 jmeter下载、解压、启动

    1:下载地址:http://jmeter.apache.org/download_jmeter.cgi 2:双击下载的zip文件,即可解压 3:打开终端,cd 到解压的目录下 例如:cd  /User ...