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. C++ namespace

    namespace, 命名空间, 用于解决命名冲突的问题. Python中的package/module, Javascript中的object, Java中的package都具有这样的功能. 如何使 ...

  2. 页置换算法FIFO、LRU、OPT

    页置换算法FIFO.LRU.OPT 为什么需要页置换 在地址映射过程中,若在页面中发现所要访问的页面不再内存中,则产生缺页中断.当发生缺页中断时操作系统必须在内存选择一个页面将其移出内存,以便为即将调 ...

  3. 使用DataTable更新数据库

    简例: string connStr = string.Format("Driver={1}Microsoft Access Driver (*.mdb){2};DBQ={0};" ...

  4. cookie

    1.基本操作 Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给 ...

  5. c# ip内外网判断

    /// <summary> /// 判断IP地址是否为内网IP地址 /// </summary> /// <param name="ipAddress" ...

  6. console在调试中的常见用法

    console在不打断程序运行的情况下在控制台输出我们想要看到的信息: 一般情况下我们用来输入信息的方法主要是用到如下四个: 1.console.log 用于输出普通信息 2.console.info ...

  7. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  8. C#之接口

    接口类Interface1.cs using System; using System.Collections.Generic; using System.Linq; using System.Tex ...

  9. 继承 原生js 与 $.extend(true,default,opts||{});

    $.extend(true,default,opts||{}); var obj1={ name:'liu', sex:'m', work:'pc' } var obj2={ sex:'w' } va ...

  10. js控制文本框只能输入中文、英文、数字与指定特殊符号.

    先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...