【Progate】Sassをやってみた感想

ProgateでSassを学んだ感想について書いています。

Sassとは「CSSをより便利に効果的に操作する言語」です。

ソースコードをCSSよりも少ない行数で表現できるのがメリットです。

 

前回は、HTML&CSSを学びました。(HTML&CSSの感想は別の記事に書いています。)

次はJacaScriptをやろうかな~と思っていたのですが、レッスン数をみるとSassが少なかったので、Sassに寄り道してみました。

 

Sassを学んで思ったこと

CSSをより少ない行数で、見やすく表現できるのはすごくいいなと思いました。

引数や変数、入れ子構造を利用することで、同じことを何度も書かずに済み、少ない行数で表現することができます。

 

変数を使うことで、カラーコードで表現した色に名前を付けられるのも便利だなと思いました。

White(#FFFFFF)のような簡単なカラーコードだったら、コードを見るだけでも何色か判断しやすいです。

でも、#9966FFのようなコードだったら何色かわかりづらいと思います。

そんな時に「$変数名(自由に決められる):値(カラーコード);」で変数を定義すると、色を変数名で表現できるので、カラーコードだけではわかりづらかった色を判断することができます。

 

具体例をあげるとこんな感じです↓

ブータン

#003300が濃い緑で、#FF0033が明るい赤なんだけど区別が難しい…

ブータン

わかりづらいから変数を定義して、色に名前をつけてみよう!

$deep-green:#003300;
$bright-red:#FF0033;

のように定義したら、これ以下の行で、

backgroud-color:$deep-green;
color:$bright-red;

という感じで表現することできます。

ブータン

できた!これで区別が楽になったね(^O^)

 

Progateのレッスンを1回さらっとやっただけなので、見本を見ながらじゃないとコードは書けそうにないですが、CSSを学んだ直後にSassの世界を知ることができてよかったです。

ちなみに、Sassを修了してLv.37まで上がりました。

ゲーム感覚でできるのもProgateのいいところですね。

 

まとめ

HTML&CSSがある程度わかっていればSassも理解できる!

難しすぎず、簡単すぎない難易度でちょうどよかったです。

次はJavaScriptに進みたいと思います。

 

おわり