在浏览器页面有时看到sass文件而不是css文件问题,其主要由于sass开启了source-map(调试)功能,问题如下图:

sass调试

sass调试需要开启编译时输出调试信息和浏览器调试功能,两者缺一不可。

开启编译调试信息

目前sass的调试分为两种,一种为开启debug-info,一种为开启sourcemap(这个将成为主流)。

如开启的是debug-info,则解析的css文件中会有以@media -sass-debug-info开头的代码,如没有则表明没有开启。

如开启的是sourcemap,则在解析的css文件同目录下生成一个.css.map的后缀名文件。

命令行开启

两个的命令分别为--debug-info--sourcemap,开启如下:

 sass --watch style.scss:style.css --debug-info
sass --watch style.scss:style.css --sourcemap

koala开启

有关koala的使用请点击这个http://koala-app.com/index-zh.html

如下图:点击相应的文件,然后就会出现右边的编译选项,即可选择是否开启source mapdebug info

开启浏览器调试

谷歌浏览器调试

F12打开调试面板,点击调试面板右上角的齿轮图标打开设置,在general选项中勾选Enable CSS source map 和 Auto-reload generated CSS

开启--sourcemap编译,f12打开调试面板,就可以看到原先右边的css文件变成了我们现在的scss文件

点击scss文件,会跳到source里面的scss源文件,现在可以在里面进行修改,修改完成后可以右键选择savesave as命令,然后替换我们本地的scss源文件,刷新chrome就可以看到变化(注意,解析样式需要一定时间)。以后只要ctrl+s保存修改就可以在浏览器中看到修改效果了。

火狐浏览器调试

debug-info调试

firefox可以安装插件FireSass使用debug-info来调试。

开启--debug-info编译,f12打开firebug,就可以看到原先右边的css文件变成了我们现在的scss文件

sourcemap调试

firefox 29 将会开始支持sourcemap,注意是火狐自带的调试功能,而不是firebug。

开启--sourcemap编译,右键“查看元素”采用火狐自带的调试功能,打开调试面板,在样式上右键选择“显示原始来源”。

点击scss文件,这样就跳到了scss文件。如下图:

然后就可以进行我们的修改了,修改之后点击保存或者'ctrl+s'弹出我们要保存到哪里,同谷歌一样直接覆盖到我们本地的源文件就ok了。

有时用29 beta版本的时候这个功能不太稳定,估计到稳定版本应该就好了。同时期待FireSass这个插件升级支持sourcemap。

sass调试--页面看到sass文件而不是css文件问题的更多相关文章

  1. Visual C++ 编译器自动假定带 .C 扩展名的文件是 C 文件而不是 C++ 文件,并且拒绝 C++ 语法和关键字(c语言只能在大括号最前面申明变量)

    今天在编译OpenGL红宝书附带源码中的light.c文件时遇到一个诡异的问题: 如图light .c,在不做任何修改的情况编译OK.然而只要在某些地方写了可执行代码,则会无法通过编译器编译! (这几 ...

  2. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  3. bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢?

    bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢? 如果用sublime的话如何实现代码保存后浏览器刷新成最新的代码样式? 或者有什么其他好用的工具? 从网上找了很多方法 ...

  4. 用gulp把less文件编译成css文件

    第一次使用gulp构建工具,使用gulp将.less文件编译成.css文件并输出.根据视频做了笔记.提供新手和自己以后做参考. HTML文件 <!DOCTYPE html> <htm ...

  5. Maven工程webinfo下面的JSP页面无法加载.js、.css文件的解决方案

    --下面是我的工程路径 --我jsp的写法 -----启动工程,访问js文件的路径是这样的, href="http://localhost:8080/activiti/css/public. ...

  6. Sass简介,安装环境,Sass的语法格式及编译调试

    什么是 CSS 预处理器? 定义:CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进 ...

  7. sass登陆页面实例

    sass登陆页面实例 一.总结 一句话总结: sass使用非常方便:使用就是将sass转化为css引入,并且动态监听让sass转化为css,可以很方便的所见即所得 1.sass安装? npm就可以按照 ...

  8. 邂逅Sass和Compass之Sass篇

    对于一个从后台转到前端的web开发者来说,最大的麻烦就是写CSS,了解CSS的人都知道,它可以开发网页样式,但是没法用它编程,感觉耦合性相当的高,如果想要方便以后维护,只能逐句修改甚至重写相当一部分的 ...

  9. sass学习之一:sass安装compass部署

    主要参考 http://www.jianshu.com/p/5bfc9411f58f -------------------------------------------- sass基于ruby 需 ...

随机推荐

  1. NOIP 2015 BZOJ 4326 运输计划 (树链剖分+二分)

    Description 公元 年,人类进入了宇宙纪元. L 国有 n 个星球,还有 n− 条双向航道,每条航道建立在两个星球之间,这 n− 条航道连通了 L 国的所有星球. 小 P 掌管一家物流公司, ...

  2. MyBatis入门(六)---mybatis与spring的整合

    一.整合需要 1.1.方法 上一章中的数据 需要spring通过单例方式管理SqlSessionFactory spring和mybatis整合生成代理对象,使用SqlSessionFactory创建 ...

  3. bzoj1622 [Usaco2008 Open]Word Power 名字的能量

    Description     约翰想要计算他那N(1≤N≤1000)只奶牛的名字的能量.每只奶牛的名字由不超过1000个字待构成,没有一个名字是空字体串,  约翰有一张“能量字符串表”,上面有M(1 ...

  4. C#配置文件config的使用

    做程序的时候总会有一些参数,可能会调整,这时候一般情况下我都会写在配置文件里,这样方便一点. 配置文件的读取 <?xml version="1.0" encoding=&qu ...

  5. Generative Adversarial Nets[Improved GAN]

    0.背景 Tim Salimans等人认为之前的GANs虽然可以生成很好的样本,然而训练GAN本质是找到一个基于连续的,高维参数空间上的非凸游戏上的纳什平衡.然而不幸的是,寻找纳什平衡是一个十分困难的 ...

  6. 批量操作数据库数据mybatis.xml

    批量插入数据 <insert id="equipment_Add" parameterType="cn.wtsr.core.web.dao.vo.equipment ...

  7. CodeForces - 429A Xor-tree

    Iahub is very proud of his recent discovery, propagating trees. Right now, he invented a new tree, c ...

  8. cxf动态调用外部web service 报告异常java.lang.NoSuchFieldErr

    原因:cxf 依赖的xmlschema-core 与axis2-kernel依赖的xmlschema冲突. 解决方法:因为在项目中只用cxf即可,所以删除axis2的依赖.

  9. DP 题集 1

    关于 DP 的一些题目 参考资料 [Tutorial] Non-trivial DP Tricks and Techniques DP Rain and Umbrellas Mr. Kitayuta, ...

  10. unity, 两个动画同时播

    法一,animationLayer. 处于不同animationLayer中的状态可以同时运行,即其中的动画可以同时播放. 所以通常一个角色至少需要用两个animationLayer,一个layer用 ...