SASS调试

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

大家都知道几大主流浏览器对CSS的调试都非常方便,特别是通过Firebug这样的浏览器插件,更是让大家爱得没法说了。那么我们玩SASS能不能像玩CSS一样,通过浏览器的开发者工具,直接调试SASS呢?

带着这样的问题,我开始在互联网上寻找这样的答案。值得庆幸的是在net tuts+上看到Umar Hansa的一篇教程——《Developing With Sass and Chrome DevTools》。

我在教程中一眼看到一张gif的演示图:

Sass调试

真的是太有意思了,也让我兴奋起来了。于是配合自己的电脑,开始按着教程操作,一路下来还是碰到不少蛋疼的问题。

别的就先不说了,我主要想分享一下我自己根据教程配置Chrome调试SASS的一点经验。希望其他的同学不要像我一样走这么多的弯路。那么我们就开始吧。(^_^)。

运行的环境

运行环境非常重要,我今天就吃了这样的大亏,主要还是自己看东西不够仔细。这里特意提醒同学们不要犯我这样的错误。

这里所指的环境是指我们项目工作环境和浏览器版本需求:

  • 具备本地服务器:我使用的是wamp集成环境
  • 浏览器版本:Chrome Canary29+ (我使用的是Chrome 30.0.1568.0 canary)
  • Sass3.3.0

以后这个需求主要是针对于Chrome浏览器下,因为接下来我们要做的事情就是如何让Chrome下的开发者工具能实时调试我们项目中的SASS代码,就像是调试CSS一样。

配置环境

环境的配置,这里我不想用太多的篇幅来介绍,如果你的环境还没有配置的话,你可以参阅一下下面的几篇文章:

1、本地服务器安装与配置

首先在本地配置一个生产服务器,下面有两篇文章,可以轻松的帮助你在Windows和Mac OS X系统下完成环境的配置:

2、安装Chrome Canary浏览器

虽然大家平时使用Chrome Canary浏览器比较少,或者说很多很多同学是几乎是不用的,但是我们要在Chrome浏览器下调试SASS,那么这个东东还是必备的一样。如果你也想动手尝试的话,赶快点击这里下载。

下载到Chrome Canary浏览器之后,你就点击安装一路下去就Ok了。

3、SASS3.3.0安装

在《SASS编译》一文中详细介绍了如何安装SASS。在文中介绍了三种安装SASS的方法,但我们只能选择Beat版本的安装方法。主要是因为,我们需要使用到sass命令中的--sourcemap功能,而这个功能在标准版本中又还没有具备,所以我们只能先安装一个SASS3.3.0(目前还属于SASS Beat版本)。

要成功安装SASS,首要是需要有一个Ruby环境,所以如果你的前提没有Ruby环境之下,你需要将这个搞定,详细的请参阅《SASS编译》一文,这里不再做过多的阐述。

假设你已具备了Ruby环境,你可以打开你的命令终端(在Mac机下),如果你的系统是Window需要打开“Start Command Prompt With Ruby”。然后输入命令:

$ gem install sass --pre

此时,你的命令终端将会输出下面信息:

Fetching: listen-0.7.3.gem (100%)
Successfully installed listen-0.7.3
Fetching: sass-3.3.0.alpha.201.gem (100%)
Successfully installed sass-3.3.0.alpha.201
Installing ri documentation for listen-0.7.3
Installing ri documentation for sass-3.3.0.alpha.201
2 gems installed
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-debug-with-developer-tool.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部