Sass mixins 在注释中输出变量答案

【问题标题】：Sass mixins to output variable in commentsSass mixins 在注释中输出变量
【发布时间】：2013-06-19 01:03:40
【问题描述】：

在处理大型 sass 库时，我喜欢包含标志；导入文件的大标志和导入文件的小标志。这使得在浏览器中调试更容易，因为我可以快速找到相关的 sass 文件并进行更改。

有没有办法让 mixin 输出带有分配变量的 cmets？这是我尝试过的。

@mixin bigflag($filepath){
      /***********
        ******  $filepath
       ***********/
    }

@include bigflag(scss/middle/header.scss);

我希望上面的代码输出为

      /***********
        ******  scss/middle/header.scss
       ***********/

这不起作用；非结束注释使变量无效或被注释掉。我想我可以复制和粘贴评论标志，但是......这将非常方便。

感谢任何帮助。谢谢

【问题讨论】：

Sass 已经提供了调试选项，你为什么不用呢？
不太恰当地描述为调试，也许我的需要更好地描述为像素完美。我可以在浏览器开发工具中切换值，找到我想要的确切值，然后更改 sass 文件，而不是尝试 sass 中的值、保存、重新编译和检查浏览器。这些标志让我可以在检查器中完成切换后快速找出需要更改的文件。
然后呢？ --debug-info 标志添加行号以显示样式的来源。
我想的工作流程；我严重依赖 chrome 开发工具来进行样式设置。我将尝试使用 --debug-info 并让你知道我是如何做出来的。感谢您关注此问题。

标签： sass

【解决方案1】：

经过对 sass 中转义字符的一些研究

@mixin flag($file){
/***********
******  #{$file}
***********/
}
@include flag(scss/middle/header);

输出为

/***********
******  scss/middle/header
***********/

注意：sass 不喜欢句号。因此，如果您使用标志（scss/middle/header.scss），则需要转义 scss 之前的句点。这个很辛苦，我不会用。

【讨论】：