CSS

【Sass入門】CSSの進化版！Sassの使い方とメリットを解説！

  /
CSS

 

今回はCSSの進化版であるSass（サース）と呼ばれる言語について紹介したいと思います。Sassを使用することで、普段のCSSの記述をよりシンプル、かつスマートに書くことができます。

よし
よし
基本的にはSassで書いた方が無難だね。

この記事の内容
  1. Sass（サース）とは
  2. メリット
  3. まとめ

Sass（サース）とは

Sass

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

Sassには、SASS記法とSCSS記法の2種類の書き方があり、主流はSCSS記法になっています。そのため、この記事ではSCSS記法について解説していきます。

メリット

Sassを使用するメリットは主に３つです。

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

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

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

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

.side__bar {
  background-color: red;
}

.side__bar p {
  font-weight: bold;
}

 

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

.side__bar {
  background-color: red;
  p {
    font-weight: bold;
  }
}

変数が使える

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

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

1行目でmain-colorを定義しています。そして、その色を使用したい箇所でその記述を呼び出しています。

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

h2 {
  color: main-color;
}

p {
  color: main-color;
}

 

ここで２つ注意点があります。

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

 

以下はダメな場合の例です。

これは変数が利用する箇所よりも後に定義されてしまい、main-colorを呼び出すことができません。

h2 {
  color: $main-color;
}

$main-color: #6699CC;

 

以下のコードも同様です。

h2で定義されたmain-colorはpタグのスコープ外のため、pタグ内で記述を呼び出すことはできません。

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

p {
  color: $main-color
}

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

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

使い方は以下の通りです。

まずは定義したいコードを@mixinで定義します。そしてその記述を呼び出したい箇所で、@includeを記述します。こうすることにより、@mixinで定義したコードを何度も使用することができます。

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

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

#box2 {
  @include common_box;
}

まとめ

  • SassとはCSSをより早く、より簡単に書けるように作られた言語である
  • SASS記法とSCSS記法の2種類があり、SCSS記法が主流である
  • Sassを使用するメリットは「セレクタをネスト(入れ子構造)で書くことができる」「変数が使える」「mixinで同じコードを何度も書かずに済む」の3つである

 

 

今回はCSSの進化版であるSass(サース)と呼ばれる言語について紹介しました。CSSさえ理解できていれば簡単に実装できる言語なので、ぜひご自身でも試しに書いてみてください。

CSS Sass
こんな記事もおすすめ