【受講記録】デイトラWeb制作コース初級編DAY24

目次

はじめに

2024年10月からデイトラのWeb制作コースの受講をスタートしました。

アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。

OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。

この記事はこんな人に参考になるかも?

これからデイトラWEB制作コースの受講を考えている方
 実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います!

現在進行形でWEB制作コース受講中の方
 一緒に頑張っていければうれしいです!X(旧Twitter)などで交流しませんか!

卒業生の先輩方
 懐かしんでいただければ・・・笑 
  自分なりに調べた記録も付加していますが、もし間違ってるよー!等ございましたらこっそり教えていただけますと嬉しいです。

初級編DAY24の押さえておきたいポイント

Sassを使うには

SassはCSSのようにHTMLでファイルを指定して読み込むことはできない。

Sassで書いた内容をCSSにコンパイルする(=変換する)必要がある。

VSCodeのLive Sass Compilerという拡張機能が便利。

Sassは、アンダーバー ”_”から始まるファイル名を無視する特性があり、この特性を使うことでSassファイルを役割に応じて分割して管理することができる!

ファイルを以下の通り分割して作成。

  • /sass/_button.scss
  • /sass/_heading.scss
  • /sass/style.scss

これをstyle.scssで@useを使って読み込む。
※このとき読み込みの順番は注意が必要!

@use "button";
@use "heading";

@useで変数や@mixinを呼び出すときには変数名やmixin名の先頭に読み込むファイル名を明示する必要があるので忘れない!

初級編DAY24の追加で調べたいことメモ

  • Live Sass Compilerから出力されるソースマップは一旦無効化しているが、どういうときに何のために使うのかを調べる!

初級編DAY24の感想と記録

ファイルの分割、共通化は何となく便利そうなイメージはあるけれど、
ちょっと実際にやってみないとわからないなぁ・・・というのが印象。
(下手に使うと逆に非効率になりそう?)

Day26からのポートフォリオでもがっつりSass使いそうだったので、
カフェLPのSass修正は基本の入れ子の書き方、変数の書き方、ファイルの分割、@mixinだけを少しだけやって全部書き直しはやらず。

先に進んでみることにします!

引き続きがんばるぞ!

DAY24 完了日 : 2024年11月11日(月)
DAY24 所要時間 : 1h
Web制作コース 初級編Total : 45h

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

目次