compass利用koala在chrome开启scss调试
compass不生成maps文件,所载调试css上,极不方便。看到下图的调试方式,怎么做。

利用用koala来解决,具体步骤如下:
1.确保自己安装了ruby和sass,compass。接着安装 compass-sourcemaps
gem install compass-sourcemaps --pre
2.安装koala,安装完成打开设置

3.在config.rb文件添加下列一段代码
# enable sourcemaps
enable_sourcemaps = true
sass_options = {:sourcemap => true}
4.开启chrome的开发者工具(F12)-> settings -> preference(首选项意思)

ps: koala 是一种前端能转义的工具,当然现在都在使用webpack,gulp,grunt等其他打包软件,但是这些打包软件,都需要写配置,明明就是简单活动页面,另外你也不想再自己的编辑器上装各种sass转css插件,所以koala提供很大方便。
compass利用koala在chrome开启scss调试的更多相关文章
- 利用ChromeCROSS可以在chrome浏览器上调试跨域代码
利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...
- Chrome控制台 JS调试
Chrome控制台 JS调试的一些小技巧 $ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择 ...
- Chrome浏览器及调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程 在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...
- 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...
- Chrome浏览器如何调试移动端网页信息
Chrome浏览器如何调试移动端网页信息 2017年08月12日 12:42:20 阅读数:835 最近在弄项目,用WebView加载一个页面,想追踪页面中一个按钮的点击事件.这个可能就需要调试这个页 ...
- chrome inspect 远程调试H5
chrome://inspect/#devices 一个内置于chrome的远程调试指令,满足远程调试的几个必须条件 1,能够访问https://chrome-devtools-frontend.ap ...
- 使用Chrome DevTools直接调试Node.js与JavaScript(并行)
Good News: 现在我们可以用浏览器调试node.js了!!! 前提 Node.js 6.3+, 这个可上Node.js官网自行下载: Chrome 55+. 如果您本地的chrome升级到最新 ...
- Chrome安卓H5调试,连接手机检测不到页面
Chrome安卓H5调试,连接手机检测不到页面,重启什么的都不行,未找到设备,或者offline,怎么办? 首先手机开启调试模式是必须的 然后用adb工具箱,cmd进来 运行命令 adb kill-s ...
- 利用Jemalloc进行内存泄漏的调试
内存不符预期的不断上涨,可能的原因是内存泄漏,例如new出来的对象未进行delete就重新进行复制,使得之前分配的内存块被悬空,应用程序没办法访问到那部分内存,并且也没有办法释放:在C++中,STL容 ...
随机推荐
- 使用 Splash
Splash 简介与安装 Splash Lua 脚本 Splash 对象属性 Splash 对象方法 Splash API 调用 Splash 负载均衡
- C# Serializable对象序列化的作用
http://www.cnblogs.com/linlf03/archive/2011/11/03/2234424.html 1.序列化定义:将对象转换为容易传输的格式的过程.例如,可以序列化一个对象 ...
- AddParent
using UnityEngine; using UnityEditor; using System.Collections; public class AddParent : ScriptableO ...
- 关于MFLAGS与MAKEFLAGS
与子make通讯的选项 诸如‘-s’和‘-k’标志通过变量MAKEFLAGS自动传递给子make.该变量由make自动建立,并包含make收到的标志字母.所以,如果您是用‘make –ks’变量MAK ...
- Qt编写的RTSP播放器+视频监控(ffmpeg版本)
记得四年前就写了个简易版本的,当时写得非常粗糙,代码实在惨不忍睹,时隔多年后,重新写了个版本,同时还解决了以前不支持6画面8画面切换等异形布局的问题.1:可以用过目录下的rtsp.txt设置要显示的视 ...
- [转]Linux sendmail 详解
Internet上最基本的服务,现在应该大部分人都有自己的邮箱吧,用的人多,但理解的人估计没多少,我自己以前也是常常用,但对其原理并不操心.今天就来操心下,进行个小总结 一.邮件服务的基本流程 ...
- 【咸鱼教程】EUI多图片滑动组件ScrollView
先看看实际效果 实现原理1. ScrollView继承eui.Scroll2. 监听eui.Sroll的CHANGE_START和CHANGE_END事件, 根据鼠标滑动距离,来改变视口 ...
- elk单台环境搭建
一.简介1.核心组成ELK由Elasticsearch.Logstash和Kibana三部分组件组成:Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分 ...
- vue--使用过滤器
有个项目需要可以添加和删除选项,但是左侧要显示的 A,B,C,D.... 解决思路: 循环的时候
- 50.TO_NUMBER 将给出的字符转换为数字
.SYSDATE 用来得到系统的当前日期 SQL> select to_char(sysdate,dd-mm-yyyy day) from dual; TO_CHAR(SYSDATE, ---- ...