Sass 的调试

Sass 调试一直以来都是一件头痛的事情,使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件,能找到对应的行数。值得庆幸的是,现在实现并不是一件难事,只要你的浏览器支持“sourcemap”功能即可。早一点的版本,需要在编译的时候添加“--sourcemap”  参数:

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

在 Sass3.3 版本之上(我测试使用的版本是 3.4.7),不需要添加这个参数也可以:

sass --watch style.scss:style.css

在命令终端,你将看到一个信息:

>>> Change detected to: style.scss

  write style.css

  write style.css.map

这时你就可以像前面展示的 gif 图一样,调试你的 Sass 代码。

Sass 的调试的更多相关文章

  1. sass调试--页面看到sass文件而不是css文件问题

    在浏览器页面有时看到sass文件而不是css文件问题,其主要由于sass开启了source-map(调试)功能,问题如下图: sass调试 sass调试需要开启编译时输出调试信息和浏览器调试功能,两者 ...

  2. SASS学习笔记1 —— 安装、编译和调试

    一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的 ...

  3. 1-3 Sass 语法、编译、调试

    Sass 语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 Sa ...

  4. Sass学习笔记之入门篇

    Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...

  5. Sass的学习

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

  6. 基于综合服务平台浅谈Sass应用

    一.       前言 CSS不是一种编程语言,只是单纯的一行行的描述,没有逻辑没有变量,因此写CSS对于习惯于运用逻辑思维编码的程序员来说是一件很头疼的事.于是勤奋的程序员就开始运转他们敏捷的大脑, ...

  7. Sass浅谈

    对于一名前端开发来说,CSS并不陌生,几乎每天都在和CSS打交道.相处久了就会觉得CSS有些许的机械化,有些许的无趣:就会觉得写CSS很多时候都是在做一些复制粘贴性的工作,布局排版,颜色设置,边框属性 ...

  8. less,sass,stylus配置和应用教程及三者比较

    less,sass,stylus配置和应用教程及三者比较  Less 1. 定义: Less是CSS预处理语言,在css基础之上增加了诸如变量,混合(mix),继承,运算,函数等功能,LESS既可以运 ...

  9. SASS使用总结

    简单用法: 变量 sass中可以定义变量,方便统一修改和维护. //sass style $fontStack: Helvetica, sans-serif; $primaryColor: #333; ...

随机推荐

  1. Oracle11g字符集AL32UTF8修改为ZHS16GBK详解

    此问题发生在数据库迁移过程中.源数据库:自己笔记本上win7 64位系统的oracle11g个人版,字符集ZHS16GBK :目标数据库,HP的sqlserver2008 系统 64位数据库服务器,字 ...

  2. OpenCV图像的全局阈值二值化函数(OTSU)

    cv::threshold(GrayImg, Bw, 0, 255, CV_THRESH_BINARY | CV_THRESH_OTSU);//灰度图像二值化 CV_THRESH_OTSU是提取图像最 ...

  3. DSO之光度标定

    光度标定(Photometric Camera Calibration)是DSO(Direct Sparse Odometry)论文中比较特别的一部分.常规的vSLAM不太考虑光度标定的问题.比如基于 ...

  4. Git bash下中文乱码问题

    Git bash下中文乱码--解决方案 解决办法1: 在git bash下,右键 出现下图,选择options: 选择"Text" 将Character set设置为 UTF-8 ...

  5. WinForm------DateEdit属性设置

    1.只能选择年份属性设置                       

  6. 推荐一篇关于java 学习的文章,感觉写的很不错

    ---恢复内容开始---    很多网友问我学习Java有没有什么捷径,我说"无他,唯手熟尔".但是我却很愿意将自己学习的一些经验写出来,以便后来者少走弯路,帮助别人是最大的快乐嘛 ...

  7. A*寻路算法探究

    A*寻路算法探究 A*算法常用在游戏的寻路,是一种静态网路中求解最短路径的搜索方法,也是解决很多搜索问题的算法.相对于Dijkstra,BFS这些算法在复杂的搜索更有效率.本文在U3D中进行代码的测试 ...

  8. javascript的console.log用法

    f1.html代码 <iframe id="frame2" name="frame1" src="ww.html"></i ...

  9. oracle 12c 加入系统服务

    1修改oratab文件 vi /etc/oratab #把后台一行的N改为Y db01:/usr/oracle/app/product/11.2.0/dbhome_1:Y 2如果安装时.bash_pr ...

  10. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...