2020/07/07

【Sassの書き方】必ず覚えるべき機能５選

ALL HTML&CSS プログラミング

Sassを使いこなせるようになりたい人「そもそもSassってなんなの…？Sassでコードを書くメリットが分からない！CSSより使い勝手が良いらしいから使ってみたいと思ってるけど、”変数で管理する”とかよく分からないんだよなぁ…。」

このような問題を解決していきます！

この記事を読み終えると以下の様になります。

・　Sassとはなんなのか、使う事によるメリットを理解することができる。
・　Sassの厳選機能を使いこなせるようになりコーディングの効率が爆上がりする。

私自身、isaraという有名なサイトの模写に挑戦した時にCSSでスタイリングしてた時は完成に１週間かかってしまったのに対し、Sassを勉強後リトライしたら３日で書き終わったという経験があるので実体験も含めて強くお勧めします。

また、様々なブログ記事や学習教材で共通して重要とされていたポイントをピックアップしてまとめているのでこの記事にはある程度信憑性があると思います。

Sassの解説順

Sassの特徴とメリット
必ず覚えるべき機能５選
まとめ

以上の順で解説していきます。
それではさっそく行ってみましょう！！

１.Sassの特徴とメリット

SassはCSSを効率的に記述できるように設計・開発された言語であり、CSSの場合、長く複雑になってしまう記述であっても、分かりやすくシンプルに書けるというところが特徴です。

つまり簡単に言うと、「CSSを管理しやすくする」ための拡張言語です。

CSSが数千、数万行となった時にどこに何が書いてあるか把握することは困難
後から修正しようと思った時に修正漏れが起こりやすいと言う欠点がある

これらCSSの欠点を補ってくれるのがSassです。

２.必ず覚えるべき機能５選

それでは本記事の目玉である、覚えるべき５つの機能を紹介していきます！

覚えるべき機能１.入れ子で管理

例えば下記の様なHTMLをスタイリングする時、CSSで書く場合とSassで入れ子を使って書く場合を見比べてみましょう。

HTML

CSS

よく見るCSSのコードですね。.list-itemsの中のli要素、.list-items liの中のa要素にスタイルを当てていく時の記法です。これをSassで入れ子を使って書いてみると…

Sass

はい、こうなります。いちいち.list-itemsを書く必要がないだけでなく一つのまとまりとしてコードが散らからずに書くことができます。

このようにSassを使って入れ子にすることで、記載するコードの量が減るとともに、要素ごとのまとまりとしても把握しやすくなります。

覚えるべき機能２.変数で管理

color、font-size、font-family、opacityなどの値を変数で一元管理してしまうと、後からの修正がすごく楽になります。

例えばボタンにカーソルが乗った時の透明度（opacity）を変更したいなぁという時に、変数の値を一箇所変更するだけでそれが実現してしまいます！

CSSでリンクやボタンにopacityを与えている状態

この「opacityを0.6→0.7に変更したい」時に３箇所の修正が必要になります。このCSSが千行とか書かれてたら…。

Sassでopacityの変数を定義してそれぞれに与えている状態

CSSで書いた場合と違って変数で定義した$opacityの一箇所だけで修正が終わってしまいます。

覚えるべき機能３.「＆」で条件分岐

Sassで使用する「&」は、「繋げる」という意味を持っていて擬似要素を入れ子の表現で書くことができます。
:hoverや::beforeといった擬似要素をCSSで書くと下記のようになりますが、Sassで「＆」を使って書くと…

これで完了しまう。え、感動しませんか？笑
最高ですよね、バンバン使いましょう。