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. 教你一招:解决win10/win8.1系统在安装、卸载软件时出现2502、2503错误代码的问题

    经常遇到win10/win8.1系统在安装.卸载软件时出现2502.2503错误代码的问题. 解决办法: 1.打开任务管理器后,切换到“详细信息”选项卡,找到explore.exe这个进程,然后结束进 ...

  2. Zabbix客户端安装

    CentOS 7 [root@localhost /]# rpm -ivh http://repo.zabbix.com/zabbix/3.0/rhel/7/x86_64/zabbix-agent-3 ...

  3. Delphi 获取时间的年月日

    procedure TFrmLltj.FormActivate(Sender: TObject); var   Present: TDateTime;   Year, Month, Day, Hour ...

  4. ThinkPhp 3.2 自动验证

    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 数据验证有两种方式: 静态方式:在模型类里面通过$_validate属性定义验证规则 ...

  5. History lives on in this distinguished Polish city II 2017/1/5

    原文 Some fresh air After your time underground,you can return to ground level or maybe even a little ...

  6. php 生成word的三种方式

    原文地址 http://www.jb51.net/article/97253.htm 最近工作遇到关于生成word的问题 现在总结一下生成word的三种方法. btw:好像只要是标题带PHP的貌似点击 ...

  7. 数据存储_FMDB

    一.简单说明 1.什么是FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的方式封装了SQLite的C语言API 2.FMDB的优点 使用起来更加面向对象,省去了很多麻烦.冗余的C ...

  8. 旧版本APP被开发人员下架,新版本重新上传依然显示被下架

    新接了一个项目,这个项目在苹果商城上面的版本已经被原来另外一家公司的开发人员下架.我们重新设计.开发.上传,申请加急审核,终于完成手动发布.但是发布成功后,新版本提示:被开发人员下架.以前虽然迭代开发 ...

  9. getElementsByClassName简单实现

    function getElementsByClassName(node, className) { var aClassReg = className.split(' ').map(function ...

  10. Tomcat8安装, 安全配置与性能优化(转)

    一.Tomcat 安装 官网:http://tomcat.apache.org/ Tomcat8官网下载地址:http://tomcat.apache.org/download-80.cgi 为了便于 ...