35.実践課題　～Sassを使って作り直す～

昨日まではSassについて学習してきました。

本日はSassを用いて以前作ったサイトを作り直してみようという

実践スタイルの学習です。

ですので、Sassに限らず

作り直すにあたって見直したところや、気づきを書き留めておきたいと思います。

では、やっていきましょう。

やはりEmmetは強力

改めてHTMLでコードを書くときにEmmetの恩恵を感じましたね。

定期的に練習してはいるのですが、

ガシガシと使って書くということはあまりなかったです。

速度が段違いですね。

例えば、

section.about.section>.container>h2.section-title+.about-left>img^.about-right>p.about-text

こうして打つだけで、

こんな形に展開されます。ホントに魔法のよう。

慣れてきたので、

頭でHTMLのイメージをしながらEmmetの記法でかけるようになったのが大きいです。

リセットCSSの書き方

これについて改めて、考えることになりました。

今までは、reset.cssとして別途HTMLに読み込んでいたのですが

Sassを覚えたことで、

_reset.scssファイルを作って、

@use "reset";

とすることで、最終的なcssはstyle.cssだけで済みます。

どちらの方が良いのでしょうか。

最終的なファイルが少ない方が良いならscssですかね。

スニペットという魔法

これを知った時、「頭をハンマーで殴られた」そんな気がしたレベルの衝撃でした。

ざっくり説明すると、

自分がよく使う定型のコードを、自身の好みの形で登録しておくことで、

特定のキーワードを打つだけで

ズバッと表示される。

おそらく、見たことあると思います。

VSCodeでHTMLを書き始めるときに「!」を書いて、Tabキーを押すと

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

上記が表示されるやつです。

これを自作できるうえに、使用する言語ごとに設定があるので

やりたい放題なのです。(語彙力のなさｗ

今回は、簡単なコンテナクラスのスニペットを練習で作って使ってみました。

要領は掴めたので、今後いろいろと自作を進めていこうと思います。

Sassで小賢しいことをするようになった

言い方が悪いですね。

これが本筋の目的なので、使えた方が良いに決まっています。

$でサイトのよく使う色を変数にいれて、スタイルに変数を使用。
別ファイルでmediaクエリの記述をして、@useして読み込み。
さらに＠mixinを@inculdeして、スタイル内にレスポンシブの内容を記述
入れ子構造は当然で、疑似要素も入れ子なので場所がわかりやすい。

こんなところでしょうか。

ただ、やっていて思ったのが

若干jQueryとBootstrapを忘れている。

ということ。

ということで、明日はそれらの復習に時間を充てるかもしれません。

今日のまとめ

Emmetは慣れていけば高速でHTMLがかける
スニペットは鼻血がでるくらい高速化の可能性がある
Sassはやはり便利、特に変数に色を代入したり、@mixinは格別。
リセットCSSはどうんな風に書くのがセオリーなのかは要調査。

今日は実践ということでサイトを作り直しました。

1時間半くらいでしょうか。

当時と比べれば、だいぶ早いですがまだまだ早くできそうですね。

とはいえ、１からコードをかけて1人前だとも思いますので

そのあたりに注意しながら学習を進めていきます。

では、また。

web制作のしおり

日々の学習をアウトプットします。