【プログラミング・Web制作勉強ログ#59】5/4の積み上げ成果

※当サイトではアフィリエイト広告を利用している場合があります

今日の積み上げ 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でも勉強ログを呟いています。よかったら覗いてみてください♪

この記事が気に入ったら
いいね または フォローしてね!

If you like it, share it!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次