SASS 编译带注释

Question

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

>SASS input.scss output.css

我在 SCSS 中看到两种类型的评论。

// Comment

和

/* Comment */

有什么区别？

Answer 1

两种评论的区别很简单：

// Some comment for a single line

和

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

根据the officials docs of SASS，您只能使用多行注释选项将其保存到编译输出文件中。

Like Sass, SCSS supports both comments that are preserved in the CSS output and comments that aren't. However, SCSS's comments are significantly more flexible. It supports standard multiline CSS comments with /* */, which are preserved where possible in the output. These comments can have whatever formatting you like; Sass will do its best to format them nicely.

SCSS also uses // for comments that are thrown away, like Sass. Unlike Sass, though, // comments in SCSS may appear anywhere and last only until the end of the line.

所以下面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;
}

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

Answer 2

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

如果您使用 紧凑模式，或任何其他 'CSS minifier'，您最好使用

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

SASS 编译带注释

SASS compile with comments

sass

sass-rails