sass - 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;
}

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