较新版本的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文件是压缩的):

完工~共勉~

最新文章

  1. jQuery 人脸识别插件,支持图片和视频
  2. (转)You might not need jQuery
  3. 基于DDD的.NET开发框架 - ABP初探
  4. Android 并行自动化测试系统 实现总结
  5. UVa 1584 Circular Sequence --- 水题
  6. mongodb基础用法
  7. ASP.NET MVC Razor视图引擎攻略
  8. 关于font awesome或Glyphicons字体图标不能正确显示的问题
  9. bzoj1532
  10. 关于php的flush在本机正常在服务器不灵的问题
  11. 【Vue】详解Vue生命周期
  12. phpstudy连接SQL Server 2008数据库 以及 php使用sql server出现乱码解决方式
  13. HDU1039 Easier Done Than Said?
  14. C#中split分隔字符串的应用
  15. selenium自动化测试配置工具整理
  16. PAT (Basic Level) Practise - 换个格式输出整数
  17. 学习笔记TF013:卷积、跨度、边界填充、卷积核
  18. JPA(四):EntityManager
  19. 【Leetcode】143. Reorder List
  20. BZOJ 2333 【SCOI2011】 棘手的操作

热门文章

  1. Oracle并发与多版本控制
  2. laravel5笔记
  3. Jetpack 由 WordPress.com 出品
  4. swift - 字典和集合
  5. DP套DP HDOJ 4899 Hero meet devil(国王的子民的DNA)
  6. spark shuffle 相关细节整理
  7. Python Turtle
  8. Js的typeof和Js的基本数据类型
  9. 关于C#开发WEB项目TextBox控件的自适应高问题解决办法!
  10. Java_位运算(移位、位与、或、异或、非)