SASS 中的源映射 (source map) 使用方法
在前端开发中，CSS 预处理器 SASS 是一个非常流行的工具，它可以让我们用更加简洁的方式编写 CSS，并拓展了许多 CSS 中不具备的功能。其中，源映射 (source map) 是一个非常有用的功能，它可以在浏览器中调试 SASS 原始代码，而不是编译后的 CSS 代码。
源映射的使用需要在编译命令中添加一些设置，下面我们来看一下具体的步骤。
步骤一：在设置中启用源映射
在使用 SASS 编译器时，需要在其配置文件中启用源映射。假设我们将 SASS 编译器安装在了项目的 node_modules 目录下，我们可以在 package.json 中添加以下配置：
{
"name": "myproject",
"scripts": {
"sass": "node_modules/.bin/sass --watch --source-map=scss/ --style=compressed scss/:css/"
}
}其中，--source-map 选项指定了源映射文件的输出目录为 scss/，--style 选项则指定了编译后的 CSS 样式为压缩模式。
步骤二：在 HTML 中添加源映射
为了在开发时能够方便地调试 SASS 原始代码，我们需要在 HTML 中添加源映射。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
----- ---------------- ---------------------
------- --------------------------------------
-------
------
---------- ----------
-------- ----- ----- --- ----- ----------- ---------- ---------
------- --------------------------
-------
-------在 CSS 文件的链接上添加属性 crossorigin="anonymous" 和相应的属性 data-sourceurl="style.scss"，就可以开启源映射。
示例代码：
<link rel="stylesheet" href="css/style.css" crossorigin="anonymous" data-sourceurl="style.scss">
步骤三：在开发者工具中使用源映射
在开启了源映射的情况下，我们可以在 Chrome 开发者工具中使用它。在 Sources 面板中，找到 Sources Map 选项，并勾上 Enable source maps。
示例代码：
在这种情况下，开发者工具会自动加载 SASS 原始代码，并且可以通过调试工具在浏览器中查看和修改它们。
总结
通过本文的介绍，我们了解了在 SASS 中使用源映射的方法，并且了解了如何在浏览器中调试 SASS 原始代码。源映射功能对于前端工程师来说是非常有用的，它可以帮助我们更好地了解代码的结构和逻辑，提高开发效率和程序质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6653c2b7d3423812e483307b