脱Sass初心者！Sassを使って効率的にコーディングしよう!【Sass中級編】

前回 Sassを使って効率的にコーディングしよう!【Sass入門編】について書いてみましたが今回は中級編にいきたいと思います。

演算を使ってみよう！

まずは演算について説明します。
CSSを書いている時に「横幅(width)から内余白(padding)の値を引く」のような計算することがよくあります。
このような場合、計算機を使ったり暗算したりすると思いますがSassでは「演算」を使うことでこの面倒な計算を自動的にしてくれます。

style.scss

// 足し算
.sample01 {
  width: 500px + 10;
}
// 引き算
.sample02 {
  width: 500px - 10;
}
// 掛け算
.sample03 {
  width: 500px * 10;
}
// 割り算
.sample04 {
  width: (500px / 10);
}

style.css（コンパイル後のCSS）

.sample01 {
  width: 510px;
}

.sample02 {
  width: 490px;
}

.sample03 {
  width: 5000px;
}

.sample04 {
  width: 50px;
}

足し算は「+」、引き算は「-」、掛け算は「*」、割り算は「/」を使います。

@importを使ってみよう！

続いては@importについて説明します。
CSSの場合@importを使うと外部ファイルを読み込むかたちになりますが、CSSでの@importは余計なリクエストが発生するので推奨されていません。
一方、Sassの場合はコンパイル時に一つのファイルとして書き出されます。
 1つのファイルに全て記述すると可読性が悪くなってしまうので@importを使いファイル分割してみましょう。

今回は_link.scssと_button.scssを作成し、この2つのファイルをstyle.scssで読み込んでみます。

_link.scss

.link {
  color: #f00;
  &:hover {
    opacity: 0.8;
  }
}

_button.scss

.button {
  width: 300px;
  text-align: center;
  padding: 1em 0;
  display: block;
  &:hover {
    opacity: 0.8;
  }
}

style.scss

@import '_link';
@import '_button';

style.css（コンパイル後のCSS）

.link {
  color: #f00;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.button {
  width: 300px;
  text-align: center;
  padding: 1em 0;
  display: block;
}

.button:hover {
  opacity: 0.8;
}

@extendを使ってみよう！

続いては@extendについて説明します。
@extendはスタイルを継承することができる機能です。
例えば同じボタンでもいくつかの色を用意する場合があります。
このような時に@extendはとても便利です。

style.scss

.button {
  width: 300px;
  text-align: center;
  padding: 1em 0;
  display: block;
}

.button-red {
  @extend .button;
  background-color: red;
}

style.css（コンパイル後のCSS）

.button, .button-red {
  width: 300px;
  text-align: center;
  padding: 1em 0;
  display: block;
}

.button-red {
  background-color: red;
}

@mixinを使ってみよう！

最後は@mixin（ミックスイン）について説明します。
@mixinはスタイルを定義し、他の場所で呼び出して使うことができる機能です。
@mixinの使い方は@mixinの後に半角スペースを空けて任意の名前を定義します。
また呼び出す時は「@include 任意の名前;」になります。

style.scss

@mixin box {
  width: 100px;
  height: 200px;
}

.box01 {
  @include box;
}

style.css（コンパイル後のCSS）

.box01 {
  width: 100px;
  height: 200px;
}

@extendとの違い

よく@extendとの違いが分からないと言われますが@mixinの場合、定義しているだけなので呼び出さない限り何も起こりません。
先程@extendの説明で紹介したコードを@mixinに変更してみましょう。

style.scss

@mixin button {
  width: 300px;
  text-align: center;
  padding: 1em 0;
  display: block;
}

.button-red {
  @include button;
  background-color: red;
}

style.css（コンパイル後のCSS）

.button-red {
  width: 300px;
  text-align: center;
  padding: 1em 0;
  display: block;
  background-color: red;
}

記述方法も違いますが@extendの時のように.buttonはありません。
.buttonも同じようにスタイルを継承する場合は以下のように記述します。

style.scss

@mixin button {
  width: 300px;
  text-align: center;
  padding: 1em 0;
  display: block;
}

.button, .button-red {
  @include button;
}

.button-red {
  background-color: red;
}

style.css（コンパイル後のCSS）

.button, .button-red {
  width: 300px;
  text-align: center;
  padding: 1em 0;
  display: block;
}

.button-red {
  background-color: red;
}

「引数」を使った@mixin

@mixinの最大の特徴は引数が使えることです。
引数とは@mixinで定義した値の一部を変更できる機能です。
引数を使う場合は@mixinの名前の直後に（）を書きその（）内に引数を書きます。

style.scss

@mixin box($width) {
  width: $width;
}
.box01 {
  @include width(100px);
  background-color: red;
}

style.css（コンパイル後のCSS）

.box01 {
  width: 100px;
  background-color: red;
}

この例では「box」というのが@mixinの名前で引数は「$width」になります。
呼び出す時は「@include width(100px);」という形式でカッコ内に値をいれます。

引数を複数を入れる

先程は引数をひとつだけ設定していましたが複数入れることもできます。
heightも引数に設定してみましょう。

style.scss

@mixin size($width, $height) {
  width: $width;
  height: $height;
}
.box01 {
  @include size(100px,10px);
  background-color: red;
}

style.css（コンパイル後のCSS）

.box01 {
  width: 100px;
  height: 10px;
  background-color: red;
}

引数に初期値を入れる

引数には初期値を設定することもできます。
また初期値を設定した場合でも呼び出す時に別の値を指定すると上書きできます。

style.scss

@mixin size($width:100px, $height:50px) {
  width: $width;
  height: $height;
}
.box01 {
  @include size();
  background-color: red;
}

.box02 {
  @include size(200px,100px);
  background-color: blue;
}

style.css（コンパイル後のCSS）

.box01 {
  width: 100px;
  height: 50px;
  background-color: red;
}

.box02 {
  width: 200px;
  height: 100px;
  background-color: blue;
}

まとめ

さて、いかがだったでしょうか？
今回解説した「演算」「@import」「@extend」「@mixin」は、Sassを便利に使いこなすためにはとても重要な機能です。
理解できるまで、実際にコードを書きながらチャレンジしてみてください。