Sassを使用するメリット5つ

Sassを使用するメリット5つ

webデザイナー・エンジニアのりうやです!

昨今のweb制作ではHTML/CSSをそのままベタがきするのではなく、

できるだけ効率的な記法で記述してから、
HTML/CSSに変換する

ことが多いと思います。

今回はCSSをより効率的にするSassを導入するメリットについてご紹介します。

スポンサーリンク

Sassのメリット5つ

1.CSSの記述を簡略化できる

CSSはスタイルをあてる対象の要素に対して、
セレクタを何回も記述する必要があるのですが

Sassはネスト(入れ子)にして記述することができるので、
親の要素に対してセレクタをまとめることができます。

2.同じ値を繰り返し使用できる

CSSを記述していると

・あそこと同じ色を使用したい
・同じwidth設定をしたい

といったときに複数の要素に合わせて今まで書く必要がありましたが、

Sassは変数を使用することで、同じ値を繰り返し使用することができます!

3.同じCSSスタイルを使いまわすことができる

一度使用したCSSスタイルをSassの機能を使用することで、

同じCSSスタイル何度も書く必要がありません!

4.関数を使用できる

Sassには少数点以下を切り捨てる、色の明るさを指定するといった
関数が用意されており、これらを利用することができます。

また、自分で関数を作ることも!

5.CSSファイルを1つにまとめることができる

複数のSassファイルからCSSファイルを生成する際に、

1つのファイルとしてCSSファイルを生成することができ、軽量化を測ることができます。

まとめ

Sassを使用することで享受できるメリットをざっとご紹介しました。

まだまだ便利な機能がたくさんあるのでぜひ一度触ってみてください!

それでは!