drake035 drake035 - 6 months ago 43
Sass (Sass) Question

Why my comments between /* and */ in my SCSS file are taken into account?

Gulp watch
yields errors related to code between
in my
file, although I've read that this is a regular way of commenting in
. Any idea why I have this problem?


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

Content of my

$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}


SCSS has 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

Especially, SCSS interprets interpolated expressions (#{..}) within /* */. If you place the $sm-xx definitions into // style comments, the file will compile. (Note that you cannot nest comments. The // lines must be outside of the /* */ block.)