こんな人に読んで欲しい！
「scss」ファイルについてを知りたい人
こんにちは、「なゆた」です！
突然ですが、なんと「コーディングの大革命」はもう１つあるんです！！
その名も「scss」ファイルです。
今回は、その「scss」ファイルについてをお教えします。
「scss」って何？
「scss」とは、「pug」と同じくコードの編集のためだけに作られた特別なファイルです。
CSSと一緒ですが、CSSよりも簡易的にコーディングすることができる他、変数を使って条件を連携することもできます。
使い方（『Visual Studio Code』使用）
まずは、「下ごしらえ」ということで、「ターミナル」上で「gulp watch」と入力して、「pug」ファイルで何か入力しましょう。あと、CSSのリンクも付けておきましょう。「下ごしらえ」は、たったこれだけです。
次に、「scss」ファイルを作って、これから魔法を起こします。
まずは、変数を使って、何かしら入力してみて下さい。（$の中の名前は自由です。／例：「$textColor: red;」）
そして、「pug」で作ったタグに手を加える際、タグの中には変数を入れて下さい。
皆さん、ご覧ください。タグの中には変数しか入れていなかったのが、CSSファイルだと変数内の条件がしっかりと反映されています！！
そして画面上だと、こうなります！！
最後に 〜この２つはとっても役立つようになる
いかがでしたか？
この「pug」ファイルと「scss」ファイルは、これからのコーディングでとっても役立つ存在になります。
皆さんも是非、この「pug」ファイルと「scss」ファイルを使ってコーディングをしてみて下さい！！
とっても気持ち良いですよ！！
以上です、ありがとうございました！
コメント