Sass

【Sass】CSSの進化版!Sassを使うメリットについてまとめてみた!

Sass

 

今回はCSSの進化版であるSass(サス)と呼ばれる言語について紹介したいと思います。

よし
よし
Sassを使えばより早く、より簡単にコードが書けるよ!

Sass(サス)とは

Sassとは、CSSをより早くより簡単に書けるように作られた言語です。

Sassには、SASS記法とSCSS記法の2種類の書き方がありますが、主流はSCSS記法です。

そのため、この記事ではSCSS記法で説明していきます。

メリット

Sassのメリットは主に3つです。

  • セレクタをネスト(入れ子構造)で書くことができる
  • 変数が使える
  • mixinで同じコードを何度も書かずに済む

それぞれ詳しく見ていきましょう。

セレクタをネスト(入れ子構造)で書くことができる

通常のCSSだと、以下のように同じセレクタを複数回書かなくてはなりません。

.side__bar {
  background-color: red;
}

.side__bar p {
  font-weight: bold;
}

 

しかしSassの場合、セレクタをネスト(入れ子構造)にすることによって同じセレクタを書かなくて済みます。

.side__bar {
  background-color: red;

  p {
    font-weight: bold;
  }
}

 

変数が使える

変数を定義できることで、同じ値を何度も使えるようになりました。

使い方を見ていきましょう。

// 変数の定義
$main-color: #6699CC;

h2 {
  color: main-color;
}

p {
  color: main-color;
}

 

ただここで2つ注意点があります。

  • 変数は利用する箇所より前で定義しなければならない
  • 変数が使える範囲(スコープ)の気をつける

 

以下ではダメな例を挙げています。

h2 {
  color: $main-color;
}

$main-color: #6699CC;

 

よし
よし
変数は利用する箇所より前で定義しないとダメな例だね!

 

h2 {
  $main-color: #6699CC;
  color: $main-color;
}

p {
  color: $main-color
}

 

よし
よし
この例は、pタグの中のcolorに変数が入らない例だね!

mixinで同じコードを何度も書かずに済む

mixinを定義すると、定義した記述を何度も呼ぶことができます。

使い方は以下です。

// 変数の定義
@mixin common_box {
  width: 200px;
  height: 300px;
  background-color: pink;
}

// 変数の呼び出し
.box1 {
  @include common_box;
}

#box2 {
  @include common_box;
}

 

 

今回はCSSの進化版であるSass(サス)と呼ばれる言語について紹介しました。

めちゃくちゃ便利な言語なので、ぜひこの機会にマスターしましょう!