Sass入門講座 #02：Sassでネストとパーシャルを使ってみよう

[@norih7650]

いつも参考にさせていただいてます。 別ファイルではなくcolorの変数を定義した後に下部にcolorを設定しようとするとvscode下部のベルマーク(通知)にエラーが表示されます。 error: expected expression など。 ググっても原因が分からず💦 何が考えられますか？ 下記のような場合です。 $cMain: ♯000000; a { color: $cMain; }

[@Webcreatorboxx]

ファイルの形式が .sass になっていませんか？その形式だと .scss が正しいです。

[@norih7650]

@@Webcreatorboxx ご返信ありがとうございます。 ファイルの形式はちゃんと.scssになっています。 コンパイルは正常にされています。 vscodeがアップデートされてからこんな通知が出るようになったようなのですが設定が変更されたのでしょうか？

[@ryotokawamura6374]

いつも動画拝見させていただいています。ありがとうございます。 8:35 でパーシャルを読み込むのに@use 'header' ではエラーになり@import 'header' にすると解決しました. use とimportの使い分けはどのようにするのでしょうか？

[@Webcreatorboxx]

@import は来年廃止予定です。これからSassを学ぶなら@useで覚えた方がいいですね。エラーになったのはエディターがDartSassというバージョンに対応していない古いものなのかなと思います。この動画シリーズでも紹介しているVSCodeのDartJS Sass Compiler を使えば@useが使えるはずです。 kzbin.info/www/bejne/amOwi2aQn6drkKM

[@ikiw3172]

Manaさんいつも分かりやすい動画作成ありがとうございます！ １つ質問なのですが、拡張機能であるDartJS Sass Compiler and Sass Watcherを使用した際に、 style.scssを編集した際には自動でstyle.cssがコンパイルされるのですが、 変数定義を行った_variable.scssだけを編集した時は自動コンパイルされないので 一々親のscssファイルを編集している状態です。 拡張機能の設定などでこれは解決できるのでしょうか。もしご存じでしたらご教授願います。

[@Webcreatorboxx]

拡張機能の設定の DisableCompileOnSave かもしれませんねー？

[@ikiw3172]

@@Webcreatorboxx 返信ありがとうございます！設定の DisableCompileOnSave を確認したところ、特にチェックなどはなく、まだ解決に至っていないのですが、もしかすると拡張機能だとこの動作がデフォルトかもしれません。どうしてもすべてのscssを自動コンパイルしたい場合はgulp等の方法も検討しようと思います。

[@tattook7933]

動画の様にアンダースコアで＿headerファイルを作りそこに記述すると何故かCSSファイルが作成されてしまいます？？？です。

[@Webcreatorboxx]

アンダースコアは半角になっていますか？

[@tattook7933]

はい、ちゃんと半角で入力しています困ったものです。入れてる何かの拡張機能が悪さしてるとか ありますか？

[@tattook7933]

すいません〜解決しました。 easyScssの機能拡張設定の Exclude Regexと言う所に ^_+を書き足す必要があったみたいです〜~

[@一-d8h]

実践講座でも読ませていただきましたが、動画もさらに分かりやすくてありがたいです。 ネストさせるためのクラス名の具体的な付け方などによく悩むのでまた動画などで教えていただけると幸いです