2016-07-21 12 views
0

Gulp watchは、SASSの通常のコメント方法ですが、私のscssファイルに/**/のコードに関連するエラーが発生しています。なぜ私はこの問題を抱えていますか?私のSCSSファイルの/ *と* /の間のコメントはなぜ考慮されますか?

[EDIT] エラー:私のscssファイルの

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

内容:

$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} 
} 
*/ 
+0

あなたは私どもにエラーとその関連するコメントを表示できますか? –

+1

OK、ちょうど私の質問でそれを追加! – drake035

+1

エラーは「$ sm-breakpoint」変数ではなく、コメントの構文に問題があるのでしょうか? – pdoherty926

答えて

3

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

、SCSSは(#{..})補間式を解釈します以内。 $sm-xx定義を//スタイルコメントに入れると、ファイルがコンパイルされます。 (あなたが巣のコメントが。//ラインは/* */ブロックの外でなければならないことに注意してください。)

1

、について説明

サスはと標準複数行のCSSのコメントをサポートしています/ * * /だけでなく、シングルラインは、とコメント/ /。多行コメントは、できるだけCSS出力に保存され、一行コメントは削除されます。たとえば:

​​

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

にコンパイルされ

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

がにコンパイルされます

回答

これは、あなたの/* */内の変数を解決しようとしてエラーが発生する理由です。これを避けるには、代わりに//を使用してください。

関連する問題