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

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

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

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

 

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

【Progate】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のいいところですね。

参考 プログラミングの入門なら基礎から学べるProgateProgate

 

最後に

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

 

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

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

 

おわり

Web制作を160時間勉強してわかったこと【デザイン興味ない】 プログラミング初心者におすすめの言語はJavaScript 【ドットインストール】JavaScriptの効率のいい進め方【初心者向け】