在浏览器页面有时看到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. 生成月初月末便于拼接sql

    for ($i=1; $i < 13; $i++) { $date = strtotime(date("2015-$i-01")); $firstday = date(&qu ...

  2. Leetcode-189 Rotate Array

    #189.    Rotate Array Rotate an array of n elements to the right by k steps. For example, with n = 7 ...

  3. MySQL安全性语言

    文章为作者原创,未经许可,禁止转载.    -Sun Yat-sen University 冯兴伟 实验2:安全性语言 安全性实验包含两个实验项目,其中1个为必修,1个为选修.自主存取控制实验为设计型 ...

  4. C#通过SQL 添加,删除,或者修改表名。

    这是我在 https://forums.asp.net/t/2106051.aspx?Create+Dynamic+table+in+SQL+using+C+ 的回复,如果其他人需要,可以参考 如果你 ...

  5. centos7防火墙那些事

    转发设置 firewall-cmd --permanent  --add-forward-port=port=80:proto=tcp:toport=8080 firewall-cmd --perma ...

  6. Javascript基础恶补

    1.字符集:Javascript采用Unicode字符集,支持地球上所有在用的语言. 2.区分大小写:Javascript区分大小写,HTML不区分大小写. 3.空格.换行.格式控制符:Javascr ...

  7. netstat(转载)

    简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Member ...

  8. vertex compression所遇到的问题

    对于数据压缩,其实就是把浮点的32位精度,改用16位定点数来表达. 例如0.0 = 0,1.0 = 32767,-1.0 = -32767 这是一种有损压缩,会丢失一些精度,一般情况下是可以接受的. ...

  9. 【转】Xcode 6制作动态及静态Framework

    http://years.im/Home/Article/detail/id/52.html 创建iOS动态库 新建工程并选择默认Target为Cocoa Touch Framework, 如图: 做 ...

  10. Maven full settings.xml

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...