为什么我的SCSS文件中的/ *和* /之间的注释被考虑在内？

Question

Gulp watch会在我的/*文件中产生与*/和scss之间的代码相关的错误，尽管我已经知道这是一种常规的评论方式SASS。知道为什么我有这个问题吗？

[编辑] 错误：

Error: Undefined variable: "$sm-breakpoint".
        on line 42 of assets/styles/core/_media-queries.scss
>> /*
   ^
[23:30:48] Finished 'styles' after 14 ms

我的scss文件的内容：

$screen: "only screen";
$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";

/* Breakpoints */
$mq_600: "#{$screen} and (max-width: 600px)";
$mq_768: "#{$screen} and (max-width: 768px)";
$mq_1000: "#{$screen} and (max-width: 1000px)";
$mq_1024: "#{$screen} and (max-width: 1023px)";
$mq_1200: "#{$screen} and (max-width: 1200px)";
$mq_1300: "#{$screen} and (max-width: 1300px)";
$mq_1400: "#{$screen} and (max-width: 1400px)";
$mq_1500: "#{$screen} and (max-width: 1500px)";
$mq_1460: "#{$screen} and (max-width: 1460px)";

@mixin mq_600 {
  @media #{$mq_600} {@content}
}
@mixin mq_768 {
  @media #{$mq_768} {@content}
}
@mixin mq_1000 {
  @media #{$mq_1000} {@content}
}
@mixin mq_1024 {
  @media #{$mq_1024} {@content}
}
@mixin mq_1200 {
  @media #{$mq_1200} {@content}
}
@mixin mq_1300 {
  @media #{$mq_1300} {@content}
}
@mixin mq_1400 {
  @media #{$mq_1400} {@content}
}
@mixin mq_1500 {
  @media #{$mq_1500} {@content}
}

/* Up - mobile fist approach */
/*
$sm-up: "#{$screen} and (min-width: #{$sm-breakpoint + 1})";  
$md-up: "#{$screen} and (min-width: #{$md-breakpoint + 1})";  
$lg-up: "#{$screen} and (min-width: #{$lg-breakpoint + 1})";  
$xlg-up: "#{$screen} and (min-width: #{$xlg-breakpoint + 1})"; 

@mixin sm-up {
  @media #{$sm-up} {@content}
}
@mixin md-up {
  @media #{$md-up} {@content}
}
@mixin lg-up {
  @media #{$lg-up} {@content}
}
@mixin xlg-up {
  @media #{$xlg-up} {@content}
}
*/

Answer 1

SCSS有two kinds of comments：

  

[SCSS]支持/* */的标准多行CSS注释，在输出中尽可能保留。这些评论可以包含您喜欢的任何格式; Sass将尽力将其格式化。

     

SCSS还将//用于丢弃的评论

特别是，SCSS解释#{..}内的插值表达式（/* */）。如果将$sm-xx定义放入//样式注释中，则文件将被编译。 （请注意，您无法嵌套注释。//行必须位于/* */块之外。）

Answer 2

释

Sass支持使用/ * * /的标准多行CSS注释，以及带//的单行注释。尽可能在CSS输出中保留多行注释，同时删除单行注释。例如：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

编译为：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }

另一个例子

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

编译为：

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

来源：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#comments

答案

这就是为什么它试图解决/* */内的变量并给出错误的原因。为避免这种情况，请改用//。