第九十八期:css 的 source map , scss的调试 和 scss指令。

987 阅读2分钟

这里记录工作中遇到的技术点,以及自己对生活的一些思考,周三或周五发布。

封面图

什么?sass也需要调试?是的,也许我们没有关注过这些东西,但是它确实是可以单独拿出来进行调试的。

sass可以帮助我们书写可读性强和重用性都比较强的css代码。在代码编译的时候我们需要检查代码中的错误,并且在不同的设备上做测试。

css source maps

大多数sass项目把不同来源的文件合并到一个css文件中去。并且这个css文件通常会被压缩。

当我们从浏览器检查这个css的源文件时,我们有时候无法找到相关的css代码。这个情况我们经常遇到。

解决这个问题,我们可以使用css 的source map。它可以回溯到未打包前的状态。

举个例子

我们创建一个下面的文件结构

我这个项目还是之前用compass生成的,不过没关系。生成的命令如下:

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中导入它。

@import 'layouts/_header.scss';

然后编译main.scss

sass sass/main.scss css/main.css

然后我们可以在css文件夹中看到俩个文件mian.css和main.css.map。

/*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

{
"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文件中添加一个引用标识。

/*# 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文件变动的监听。

sass --watch sass:css

我们修改scss文件中的样式,浏览器中html的样式也会相应的进行更新,需要我们手动刷新页面。

当我们开启 watch 模式后,当source map 更新后,文件变更后会保存到我们的本地文件中,watchers监听到变化后会重新编译css。浏览器自动读取编译后的样式文件,理论上就是这么简单。

scss 中的注释

好的注释可以帮助我们或者其他人很好的理解代码。也可以提供给其他工具使用,比如文档工具等。

我们也可以写出很好的注释,如comments.scss。

// 注释示例
// 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 的输出格式。
*/

我们执行:

scss comments.scss

输出comments.css文件。

@charset "UTF-8";
/*!
* Copyright 2022 auther
*/
.code {
  author: "terrence"; }

/*!
* 这段注释不会编译到css代码中,除非用了compressed 的输出格式
*/

/*# sourceMappingURL=comments.css.map */

执行compressed格式

scss --style commpressed comments.scss

则输出:

/*!
* Copyright 2022 auther
*/.code {
  author: "terrence"; }

scss支持三种注释。

  • 单行注释。
  • 多行注释。
  • 特殊注释。

单行注释以//开头。多行注释写法如下

/* --这里是注释---*/

特殊注释写法如下,

/*! --这里是特殊注释---*/

特殊注释会一直存在于css文件中。

样式风格 & 指令

在测试驱动开发中,测试用例通常用来验证代码的功能模块儿。所以我们需要编写能够通过测试的代码。

但是测试驱动在css中怎么使用呢?样式风格是我们的选择之一。我们在scss文件中修改样式,使所有的用户界面符合我们的要求。

同时在scss代码中,我们也可以使用指令:

  • @debug
  • @warn
  • @error

比如:

@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

最后

  • 公众号《JavaScript高级程序设计》
  • 公众号内回复”vue-router“ 或 ”router“即可收到 VueRouter源码分析的文档。
  • 回复”vuex“ 或 ”Vuex“即可收到 Vuex 源码分析的文档。

全文完,如果喜欢。

请点赞和"在看"吧,最好也加个"关注",或者分享到朋友圈。