【デイトラ】Web制作コース中級編②『Sass学習編』の感想と学習記録

こんにちは、アルパカ（@engineeraru）です。

デイトラのWeb制作コース中級編『Sass学習編』を学習するときに役立つ情報をまとめました。

デイトラ Web制作コース中級編『Sass学習編』の学習記録

【DAY7】Sass学習

Sassだけど拡張子はSCSS

ファイルには拡張子(ファイル末尾の文字列)があります。

CSSファイルは、ファイルの末尾に「.css」とついているから、CSSファイルとして認識されます。

※仮に「.txt」というファイル名なら、中に書いてある情報は同じでも、ただのテキストファイルとして処理されます

今回学んだのは「Sass」については、記法が2種類あり、ファイルの拡張子も2種類あることに注意しましょう。

• .sass ※SASS記法
• .scss ※SCSS記法(CSSそっくり)

基本的に皆が使っているのは「SCSS」です。

CSSファイルにするには「.css」だったのに、SASSとして書くときに「.scss」なのがちょっと分かりづらいですね😭

VSCODEのプラグイン

VSCodeのプラグインでSassを使う場合は、

• easy sass
• live sass compiler

のどちらか片方を使いましょう。

※両方入れると、うまく動作しない可能性があるので注意！！！

参考になるページは以下の通り

• 「Live Sass Compiler」の設定方法 – VScodeでSassを書く
• VSCode(Visual Studio Code)で簡単にSASS/SCSSファイルのコンパイルができる拡張機能「Easy Sass」がお勧め

基本的にはDAY8でも学ぶとおり、EasySassで良いと思います。

Sassの学習ソース

SassもProgateで学習することが出来ます。基本的な内容はデイトラと重複する所も多いので、不安な人だけやればOKだと思います😌

ドットインストールでは、ファイル分割の話もあるので、そこだけでも見てみると良いかもしれません。

で勉強するのが良いと思います(無料分でOK)👍

【DAY8】Sass実践

ファイルを保存しておく

過去に作った「模写ページ」を書き直す作業です。

必ず、昔のファイルはコピーして、別のファイルで作り直しましょう！

実際に仕事をするときも、過去バージョンをとっておくことは大事ですよね(昔のデータをすぐに見たり、過去バージョンに戻すために)。

本来の仕事ならバージョン管理専用のソフト(Git)を使うと思いますが、ちょっとした作業くらいならファイルをコピペして複製しておけばOKです👍

コンパイルって何？

「SassをCSSにコンパイルする」という内容、わかりますか？

基本的な意味は「人間用にプログラミング言語で書いたソースコードを、コンピュータに分かるデータに変換する」ということ。

(IT系の基本単語なので覚えておいても良いと思います)

参考:コンパイルとは？

「SassをCSSにコンパイルする」というのも同じような意味です。

Sassファイルは「人間が管理しやすいように作ったソースコード」ですが、そのままでは「Webブラウザ」は理解してくれません。

そこで、Sassファイルを、Webブラウザでも分かるCSSファイルに変換する。

この変換する作業のことを「コンパイル」と言います。

Sassの命名に悩んだら

Sassの命名、悩みますよね。

実際に、チームでの開発になったら、チームでのコーディングスタイル(命名のルール)があるはずなので、それに従えばOKでしょう。

ただ個人でやるなら、好きなようにやれば良いと思います。

ただし、ごちゃごちゃにならないようにするのが重要！

具体的には「CSS 命名規則」でググって良さそうなものを使うと良いと思いますよ。

OOCSS、BEM、SMACSS、FLOCSSなど色々とあります。

個人的な好みですが、BEMが最初はとっつきやすいんじゃないかなと思います。

＞BEMをSassで快適に書く方法

デイトラ Web制作コース初級編『Sass学習編』まとめ

Sass学習は以上です。

Sassの勉強、楽しくかったですね😊

これらの教材で今回学んでいないこと(ファイル分割など)を学んでみるのも良いと思いますよ👍

• Progate Sass
• ドットインストール Sass

以上、アルパカ(@engineeraru)でした。