今日の積み上げ 145日目 成果
\宣言した内容はこちらです/
本日の学び
Sassの特徴&書き方を確認⇒アウトラインの検討
・Sassの活用法や今直面している問題を簡単にまとめています↓
・基本的な機能は使う(入れ子、変数、参照、継承)
※ハイフンがあるプロパティ(例:padding-left)もすべて入れ子化できる。
・メディアクエリは@mixinを使って書く(コーディングを省略できるため)
・パーシャル機能(ファイル分割)を使うといいらしい
※パーシャルの読み込み法(@importまたは@useの方法がある)で詰まっています。
※@import機能は現在非推奨&2022年10月に廃止予定だが、Live Sass Compiler(Sass⇒CSSにコンパイルするVS Codeの拡張機能)を使用した上でパーシャル機能を使うためには、@importしか使えない・・・??
※一方、@importの呼び出しで相対パスを使うとなぜかバグる(拡張機能すべてがシャットダウンする。Live Sass Compilerとの相性の問題か。原因は判明できず)。
※読み込み法の代替案である@useや@forwardは、Live Sass Compilerは非対応で、Dart Sassなら使えるらしい(しかし今回の課題はLive Sass Compilerを使用しなければならない)。
※引き続きリサーチをしてみて、うまくいかない場合、今回はパーシャル機能は使用せず、同じファイルでコーディングすることにする。
・コメントアウト機能:「//CSSや検証ツールでは表示されないコメント」「/*CSSや検証ツールでは表示されないコメント*/」
※Sassで「Ctrl + /」のショートカットキーを使うと前者になる。後者を使うショートカットキーはないのか検索中。
・CSSで一番最初に書いていた「@charset: “utf-8”;」を書いたら、エラーになった
※原因はこちらの記事で解説されていました。
※Live Sass Compilerは、scssファイルに日本語表記を見つけたら自動でcharset指定されるとのことなので、あえて私のファイルでは書かないことにしました。
本日の反省
早速詰まってます♪
昨日は夫が2人の怪獣を連れて少し散歩に行ってくれました。おかげで集中した時間を少し確保できたので、すごくハッピーです。
詰まってるけど、超えられる壁があると笑う流川楓(山王戦)の如くがんばる。ありがとう!
今日も諦めなかった自分、お疲れ様でした!
Twitterでも勉強ログを呟いています。よかったら覗いてみてください♪
コメント