Warum werden meine Kommentare zwischen/* und */in meiner SCSS-Datei berücksichtigt?

Question

Gulp watch ergibt Fehler im Zusammenhang mit Code zwischen /* und */ in meiner scss Datei, obwohl ich gelesen habe, dass dies eine regelmäßige Art der Kommentierung in SASS ist. Irgendeine Idee, warum ich dieses Problem habe?

[EDIT] Fehler:

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

Inhalt meiner scss Datei:

$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 hat two kinds of comments:

[SCSS] 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

Insbesondere interpretiert SCSS interpolierten Ausdrücke (#{..}) innerhalb /* */. Wenn Sie die $sm-xx Definitionen in // Stil Kommentare platzieren, wird die Datei kompilieren. (Beachten Sie, dass Sie können nicht verschachtelt Kommentare. Die // Linien außerhalb des /* */ Block werden muss.)

Answer 2

Explaination

Sass unterstützt Standard mehrzeilige CSS Kommentare mit/* */sowie einzeilige Kommentare mit//. Die mehrzeiligen Kommentare werden möglichst in der CSS-Ausgabe beibehalten, während die einzeiligen Kommentare entfernt werden. Zum Beispiel:

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

wird kompiliert:

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

Ein weiteres Beispiel

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

wird kompiliert:

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

Quelle: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#comments

Antwort

das ist, warum es versucht, Variablen innerhalb Ihrer /* */ aufzulösen und Fehler zu geben. Um dies zu vermeiden, verwenden Sie stattdessen //.