什么？sass也需要调试？是的，也许我们没有关注过这些东西，但是它确实是可以单独拿出来进行调试的。
sass可以帮助我们书写可读性强和重用性都比较强的css代码。在代码编译的时候我们需要检查代码中的错误，并且在不同的设备上做测试。
css source maps
大多数sass项目把不同来源的文件合并到一个css文件中去。并且这个css文件通常会被压缩。
当我们从浏览器检查这个css的源文件时，我们有时候无法找到相关的css代码。这个情况我们经常遇到。
解决这个问题，我们可以使用css 的source map。它可以回溯到未打包前的状态。
举个例子
我们创建一个下面的文件结构
我这个项目还是之前用compass生成的，不过没关系。生成的命令如下：
代码语言：javascript复制compass create project
我们在_header.scss中写下面的样式：
// css reset
body,html{
margin: 0;
padding: 0;
}
@mixin header-styles($background-color){
background-color: $background-color;
border: 3px solid darken($background-color, 20%);
color: $header-default-font-color;
}
$header-margin:10px !default;
$header-childs-padding:10px !default;
$header-default-color:lightyellow !default;
$header-default-font-color:tomato !default;
.header{
margin: $header-margin;
*{
padding:$header-childs-padding;
}
}
.header-default{
@include header-styles($header-default-color);
}
然后在main.scss中导入它。
代码语言：javascript复制@import 'layouts/_header.scss';
然后编译main.scss
代码语言：javascript复制sass sass/main.scss css/main.css
然后我们可以在css文件夹中看到俩个文件mian.css和main.css.map。
代码语言：javascript复制/*main.css*/
body, html {
margin: 0;
padding: 0; }
.header {
margin: 10px; }
.header * {
padding: 10px; }
.header-default {
background-color: lightyellow;
border: 3px solid #ffff7a;
color: tomato; }
/*# sourceMappingURL=main.css.map */
main.css.map
代码语言：javascript复制{
"version": 3,
"mappings": "AACA,UAAS;EACL,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAad,OAAO;EACH,MAAM,EANK,IAAI;EAOf,SAAC;IACG,OAAO,EAPQ,IAAI;;AAU3B,eAAe;EAhBX,gBAAgB,EAOE,WAAW;EAN7B,MAAM,EAAE,iBAAwC;EAChD,KAAK,EAMkB,MAAM",
"sources": ["../sass/layouts/_header.scss"],
"names": [],
"file": "main.css"
}
而关键的是打开index.htm的控制台，你会发现，样式中会标记出它来自_header.scss。
编译命令执行后，不仅生成了main.css，同时也生成了main.css.map 文件。main.css.map 文件包含了css选择器之间的映射关系。映射关系本身存储在一个base64的编码字符串中，但是map文件是一个json格式。
最开始的时候，source maps 被用来处理js。从v3版本的source map协议开始，它开始支持css。sass生成css的source map，同时也在生成的css文件中添加一个引用标识。
代码语言：javascript复制/*# sourceMappingURL=main.css.map */
浏览器使用这个标识将从source map中读取规则，并将它和css联系起来。
而带下划线的_header.scss文件，就是一个partical的很好的例子。
关闭scource map
默认编译时开启source map。如果我们想关闭source map。我们可以在编译的命令上加上 -- sourcemap=none。
sass sass/main.scss css/main.css --sourcemap=none
这样在浏览器调试工具中就无法追踪到scss源文件的代码。
监听scss文件变动
通过执行如下命令，我们可以实现对scss文件变动的监听。
代码语言：javascript复制sass --watch sass:css
我们修改scss文件中的样式，浏览器中html的样式也会相应的进行更新，需要我们手动刷新页面。
当我们开启 watch 模式后，当source map 更新后，文件变更后会保存到我们的本地文件中，watchers监听到变化后会重新编译css。浏览器自动读取编译后的样式文件，理论上就是这么简单。
scss 中的注释
好的注释可以帮助我们或者其他人很好的理解代码。也可以提供给其他工具使用，比如文档工具等。
我们也可以写出很好的注释,如comments.scss。
代码语言：javascript复制// 注释示例
// start comments
$auther: 'terrence';
// scss-lint:disable Comment
/*!
* Copyright 2022 #{auther}
*/
// scss-lint:disable PropertySpelling
// compilles into invalid css
.code {
author:$auther;
}
// scss-lint:disable Comment
/*!
* 这段注释会编译到css代码中，除非用了compressed 的输出格式。
*/
我们执行：
代码语言：javascript复制scss comments.scss
输出comments.css文件。
代码语言：javascript复制@charset "UTF-8";
/*!
* Copyright 2022 auther
*/
.code {
author: "terrence"; }
/*!
* 这段注释不会编译到css代码中，除非用了compressed 的输出格式
*/
/*# sourceMappingURL=comments.css.map */
执行compressed格式
代码语言：javascript复制scss --style commpressed comments.scss
则输出：
代码语言：javascript复制/*!
* Copyright 2022 auther
*/.code {
author: "terrence"; }
scss支持三种注释。
- 单行注释。
- 多行注释。
- 特殊注释。
单行注释以//开头。多行注释写法如下
/* --这里是注释---*/
特殊注释写法如下，
代码语言：javascript复制/*! --这里是特殊注释---*/
特殊注释会一直存在于css文件中。
样式风格 & 指令
在测试驱动开发中，测试用例通常用来验证代码的功能模块儿。所以我们需要编写能够通过测试的代码。
但是测试驱动在css中怎么使用呢？样式风格是我们的选择之一。我们在scss文件中修改样式，使所有的用户界面符合我们的要求。
同时在scss代码中，我们也可以使用指令：
- @debug
- @warn
- @error
比如：
代码语言：javascript复制@mixin set-width($width){
@if $width <50 {
@error "width should be >= 50";
$width: 1px * $width;
}
@if unit($width) not 'px'{
@warn "width (#{$width}) converted to pixels";
$width: 1px * $width;
}
$width: $width * 10;
@debug: "$width:#{$width}";
width: $width;
}
div{
@include set-width(50);
}
总结
这里简单介绍了scss的source map ，调试方法，以及 三个简单的指令。
是的，scss 其实不仅仅是css ，它也可以实现动态编程。即我们常说的：css in js。
