今日はデザインカンプからのコーディングと、Sassについて勉強しました。
SassでできてCSSでできないこと
SassでできてCSSでできないことはたくさんありますが、代表的なものをまとめました。
- 変数が使える
- ｛｝（波カッコ）のなかに｛｝のようにネストが使える
- 四則演算が使える
- @mixin、@includeを使うことで、ほとんど同じスタイルの要素のプロパティ値をまとめることができる
JavaScriptのようなプログラミングをしたことのある人であれば、変数を使ったほうが後から修正しやすいことを知っているし、ネスト構造で書いたほうが主従関係が一目でわかるので、直感的に書けると思います。
@mixin、@includeについては、例えば、文字色も背景色も高さも等しい2つのボタンがあるとして、幅だけが違うときに使えます。
Sassの導入方法はいろいろありますが、VSCodeの拡張機能を使うのがおすすめです。
VSCodeでファイルを保存すると、SCSSファイルをCSSファイルにコンパイルしてくれます。
導入方法から使い方までの動画を見て、1時間くらいで実際に使えるようになりました。
今までCSSについては、書いていくうちにどんどん論理構造が崩壊してしまい、変数も使えないのでプロパティの値を後から編集するのが大変だったんですよね。
もっと早くSassを導入しておくべきだった…
デザインカンプからコーディング
デザインカンプから画像を書き出して実際にコーディングしてみました。
デザインツール（僕はFigmaを使っています）でマージンやパディングの値がわかるので、サイトを模写するよりも作業時間がとても短く簡単に感じました。
この作業は無心になれるので永遠にできる気がする。あっというまに3時間たっていました。
まとめ
しばらくはデザインカンプからコーディングをひたすらやって修行します。
コメント