带注释的 SASS 编译

Question

我正在编译一个 SCSS 文件，它似乎删除了我的评论。我可以使用什么命令来保留所有评论？

>SASS input.scss output.css

我在 SCSS 中看到两种类型的注释。

// Comment

和

/* Comment */

有什么不同？

Answer 1

正如@Roy 上面所说，多行注释 (/* */) 保留在结果 css 中，但这取决于您用于预处理 SASS 的格式。

如果您使用的是紧凑模式或任何其他“CSS 缩小器”，则最好使用

/*! important comment */

这些注释也保存在您的 CSS 的紧凑（缩小）版本中。

例子：

html {
     /*! important comment */
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

结果（紧凑，缩小版）：

html{/*! important comment */-webkit-box-sizing:border-box;box-sizing:border-box}

Answer 2

两种类型的注释之间的区别很简单：

// Some comment for a single line

和

/* This is 
a multiline comment
for large descriptions */

根据SASS 的官方文档，您只能使用多行注释选项将其保存到编译后的输出文件中。

与 Sass 一样，SCSS 支持保留在 CSS 输出中的注释和不保留的注释。但是，SCSS 的注释要灵活得多。它支持带有 /* */ 的标准多行 CSS 注释，这些注释尽可能保留在输出中。这些注释可以采用您喜欢的任何格式；Sass 将尽最大努力将它们格式化。

SCSS 也使用 // 作为被丢弃的注释，就像 Sass 一样。但是，与 Sass 不同的是，SCSS 中的 // 注释可以出现在任何地方，并且只持续到行尾。

所以下面的CSS：

/* This comment
should be kept
and not be thrown away */
.class {
    margin: 0 auto;
}

// This comment will be thrown away
.extra-class {
    color: blue;
}

将被编译为：

/* This comment
should be kept
and not be thrown away */
.class {
    margin: 0 auto;
}

.extra-class {
    color: blue;
}

要解决编译问题，您需要将 转换//为/* */注释。