廃 - before the time comes -
制作日 2022年 10月 sass
Web Site
Study Work
No.001
- 制作時間
- 約 2 時間
- 使用言語
- HTML、CSS、SASS
- 使用ツール
- VS Code
- ページ構成
- トップページのみ
- 制作内容
-
- 変数設定
- エクステンド、ミックスイン
- モバイルファースト
- 演習目的
- SASS練習 (SCSS記法)
- ＼ 制作時のポイント ／
-
共通項目を エクステンド にまとめて使い回すことで、記述量を減らした。
mixinの content を使用して、メディアクエリを設定し、ブレークポイントが変更しやすいようにした。（新機種発売時など）
SASS
SCSS記法
- HTMLと SASS (scss) でサイトを作成
-
index.html
-
style.scss
-
reset.scss
-
common.scss
-
index.scss
-
header.scss
-
main.scss
-
footer.scss
-
style.css ( scssからコンパイルされたファイル ）