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

ALL HTML&CSS プログラミング

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

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

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

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

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

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

Sassの解説順

  1. Sassの特徴とメリット
  2. 必ず覚えるべき機能5選
  3. まとめ

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

1.Sassの特徴とメリット

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

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

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

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

2.必ず覚えるべき機能5選

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

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

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

HTML

CSS

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

Sass

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

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

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

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

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

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

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

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

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

覚えるべき機能3.「&」で条件分岐

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

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

覚えるべき機能4.「mixin」が使える

簡単に説明するとコードの塊を作っておいて、別のところから呼び出すことが可能になります。

上の画像では、$breakpointsでブレークポイントの変数を定義して@mixinで出力方法を設定しています。

これでメディアクエリの書き込みが直接できるようになり速攻で終わる!

スマホサイズの時、padding-top: 60px;に変更の記述がこれで終わりです。便利。

変数を定義→mixinで出力設定→@includeで呼び出し

覚えるべき機能5. 「四則演算」で簡単修正

これは簡単な使い方をご紹介します。
例えば下記のように文字サイズを変数で管理していたとします。

あるクラスの文字サイズを12pxに設定したい!という時に…

定義した変数から「-」で設定できるんです。
四則演算ですから御察しの通り..

足し算 「+」 引き算 「-」 かけ算 「*」 割り算 「/」

でそれぞれ表現できます。

3.まとめ

  • 一つのまとまりとして「入れ子で管理」できる
  • 様々な値を「変数で一元管理」できる
  • 擬似要素など「&」で条件分岐できる
  • 「mixin」がとにかく便利
  • 「四則演算で簡単に値を修正」できる

いかがだったでしょうか?
今ではSassを使っていないWeb制作会社の方が少ないってくらいに使われる言語なので、Webコーディングを仕事とするなら必ず覚えておかないと仕事にならない可能性があります。

以上、CSSの上位互換と言われるSassについて重要な機能を厳選して5つ紹介しました。

今回の記事が良かったと思っていただけたらTwitterものぞいてみてください!
ブログの更新情報の他にもプログラミング、エンジニア転職に関する様々な情報を発信しているのでぜひ。
➡︎りゅうき@Web制作頑張る人|Twitter

最後までご覧いただきありがとうございました!
ではまた次の記事で。