利用sourcemap来调试sass
最近项目用上了sass,作为css的预处理器,它可以让我们用程序化的思维书写样式,极大的简化了css的开发,实在是前端居家旅行必备的利器。
我们都知道,在项目中,样式的频繁调试是不可避免的,用上sass虽说coding代码量减少,但调试过程着实让人崩溃。
看一段sass代码:
嵌套书写的结构在sass中经常会被用到。
编译之后的样式是这样的:
在开发工具上我们看到的是编译后的文件,而非编译前的源文件。
这个时候就产生一个问题了。在生产环境中,我希望看到的未经编译文件的调试信息,而非编译后的,因为这样会极大的方便开发人员。就像上面的截图,你能在scss文件下,快速定位到这些代码的位置吗?
~~~~~~~~~~~~~~~~~~~~~~~~无力吐槽的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
好在,sass在3.3.0之后版本提供了sourcemap功能。至于什么是sourcemap,这里有个链接大家可以参考下。
http://code.tutsplus.com/tutorials/source-maps-101--net-29173
本人本地依赖 Ruby来编译scss文件,如果你没安装Ruby,请自行安装,相关教程可以google......
如果你本地没有安装Ruby,只要装有node.js和Grunt,同样的,它们也可以用来编译scss文件.
本地装有Ruby的同学得首先确定sass(3.3.0+)和compass是否已经安装就绪。
命令行下运行:
gem list
如果没有安装这两个包的同学请执行:
gem install sass --pre
gem install compass --pre
如果是版本过于陈旧请执行:
gem update sass
~~~~~~~~~~~~~~~~~~~~我是傲娇的分割线~~~~~~~~~~~~~~~~~~~~~
安装好sass和compass后,我们本地建立一个测试用的项目。
目录结构如下:
sass目录下有一个li.scss文件,我们的任务就是把li.scss编译到css目录下,同时生成sourcemap文件。
获取sass的相关用法可以在命令行下输入:
sass --help
进入项目根目录,命令行下输入:
sass --sourcemap --style compact --watch sass:css
这时sass目录下的scss文件都处于被监听的状态,一旦文件被修改,便会及时编译到css目录下,同时生成相应的sourcemap文件。当然,编译的同时,命令行下的窗口会输出相应的信息,以便开发者调试。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~美丽不可方物的分割线~~~~~~~~~~~~~~~~~~~
到这一步,我们已经成功生成了sourcemap文件,可惜的是,在浏览器下查看,我们仍未看到相对应的scss文件。
这是为什么呢?我们拥有了souremap文件,却缺少了相应的解析工具。
Chrome是支持sourcemap的,但要使用该功能,我们得首先开启它。
开启的步骤很简单,我就不过多描述了,大家看下面的截图就好了。哦,还有,推荐大家把chrome的版本升到33+,因为我不确保较低版本的chrome能否支持sourcemap。
“F12”,调出开发者工具,点击如下图标:
在弹出的面板里,选择:
重启你的chrome。
回到页面下,这个时候你就可以看到sourcemap起作用了。
这个时候,若你想修改scss文件,根据行号便可以快速定位,非常方便。
~~~~~~~~~~~~~~~~~~我是寂寞的分割线~~~~~~~~~~~~~~~~~
这里延伸一下。
许多同学都喜欢用webstrome来编写代码,其实我们利用其的File Watchers功能很方便就能编译scss文件。
‘Ctrl+Alt+S’调出setting面板,搜索“file watchers”。
点击“添加”按钮
弹出如下面板:
这里我们重点填写下面两项:
Program:xxxxx 这里填入你ruby安装目录下的scss.bat文件(windows系统下)
Arguments:xxx 这里输入的是编译时的一些参数,我这里输入的是:
--no-cache --sourcemap --style compact $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
配置完这些选项,当我们修改*.scss文件,文件就会自动编译,特别方便。
~~~~~~~~~~~~~~~~~~~~~~~~~~~写在最后的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~
最后,谢谢大家。
利用sourcemap来调试sass的更多相关文章
- 支持新版chrome,用webstorm编译形成css和sourcemap,调试sass和less源文件(转)
旧版的chrome有个support for sass,但是新版chrome没有这个功能了.看到网上提供的方法比较多,也很乱,旧版新版的都有.而且不能指定自己所需要的路径. 所以就做了下改版. sas ...
- 利用Eclipse+openJTAG调试led.axf文件
转自calvinlee1984 Subject:利用Eclipse+openJTAG调试led.axf文件 Date: 3-Mar-2011 By: Calvinlee1984 ...
- 利用Pycharm断点调试Python程序
利用Pycharm断点调试Python程序 1.代码 准备没有语法错误的Python程序: #!/usr/bin/pythonimport numpy as np class Network: def ...
- Chrome浏览器下调试SASS
网上说的方案各有各的说法,尝试多个才找到有效方案,为避免后来者麻烦,现在讲讲如何调试 笔者ruby版本为3.4.19,因为sass文件的编译是需要ruby环境的,使用sass前需要先安装! 第一步(核 ...
- chrome 调试 SASS
第一步: 执行sass预编译命令 先来我的项目文件夹结构: ->进入sass /css文件下->打开cmd命令 ->输入sass --watch --scss test.scss: ...
- 利用Keil u4调试,精确实现软件延时
用定时器延时,有时候显得有点麻烦,我们不如考虑软件精确延时,软件延时无非就是利用for或while多重循环.以前用到延时函数时,都是从网上下载别人写好的延时子程序.延时5ms,400ms,1s,……, ...
- 利用Pycharm本地调试spark-streaming(包含kafka和zookeeper等操作)
环境准备就不说了! 第一步:打开Pycharm,在File->Setting->Project Structure中点击Add Content Root 添加本地python调用java和 ...
- 利用 WireShark 深入调试网络请求
来源:伯乐在线 - bestswifter 如有好文章投稿,请点击 → 这里了解详情 背景 最近发现我们产品在打开广告链接(Webview)时有一定概率会非常慢,白屏时间超过 10s,追查广告的过程中 ...
- 利用pycharm远程调试openstack代码
1.安装pycharm专业版 本文安装pycharm 2016.2.3专业版.网上教程较多,这里不做详细介绍,只要到pycharm官网上下载应用程序进行安装即可. 2.pycharm配置 (1)首先按 ...
随机推荐
- js浮点数精确计算(加、减、乘、除)
<SPAN style="FONT-SIZE: 18px">//说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加 ...
- powerdesigner 绘制表关系和导出sql
1.生成图(A图,B图) 2.创建关系(palette工具栏里有个线条,主表子表关系连接即可,拖动是由顺序的,一对多即从A表往B表连接) 3.这里小说一下 一开始是CDM模式,可以在软件最顶层看到 ...
- 《TCP/IP详解卷1:协议》第11章 UDP:用户数据报协议-读书笔记
章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...
- css知识点补充、css属性、
1.媒体查询的css代码的优先级要比其他的高! 2.text-overflow: 定义文本溢出父级元素如何处理! clip/ellipsis/string 3.overflow: visible ...
- 传智168期JavaEE就业班 day04-dom
* 课程回顾: * js语法 * js的动态函数和匿名函数 * js动态函数 Function new Function(); * 匿名函数:没有名称的函数,起个名称 var add = functi ...
- 在CentOS上安装SQLServer
Install SQL Server on Red Hat Enterprise Linux 参考上面这篇文章即可,需要注意的是内容大于3.25G,然后设置Sa密码的时候需要至少一个大写字母.一个小写 ...
- unicode和gbk的互相转换
unicode和gbk的互相转换主要依靠window下的escape和unescape方法,然后把%u替换成\u就好了; var GB2312UnicodeConverter = { ToUnicod ...
- Canvas识别相似图片
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- POJ3749 破译密码
Description 据说最早的密码来自于罗马的凯撒大帝.消息加密的办法是:对消息原文中的每个字母,分别用该字母之后的第5个字母替换(例如:消息原文中的每个字母A都分别替换成字母F).而你要获得消息 ...
- TYVJ1038 忠诚
hzw学长博客里的2048,根本停不下来! 描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要 求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意. ...