Sassの基礎-ネスト構造と変数について解説！【Sass,CSS】

Sass（Syntactically Awesome Style Sheet）は、CSSをより効率的に書くための拡張言語です。

この記事では人気のエディターであるVSCodeを使って、Sassの基礎としてネストと変数についてを解説していきます。

環境構築

まず、自分の環境でSassを利用できるようにするために、環境構築をする必要があります。

Sassの環境構築についてはこの記事で解説していますのでまだの方はこちらの記事を参考にやってみてください。

ネストについて解説

HTMLコード例

  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

今回は、例としてこのHTMLのコードにスタイルをあてていきます。

CSSコード例

nav {
  background-color: #333;
}
nav ul {
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: white;
}

このコードにCSSでスタイルをあてようとするとこのようなコードになります。

Sassコード例

nav {
  background-color: #333;

  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        color: white;
      }
    }
  }
}

Sassを使って書くとこのようになります。

SassとCSSの違い

CSSと比較してSassで書いたコードの方がHTMLで記述した構造に近くてコードが見やすいことがわかると思います。

このようにネストを使うことによってコードを見た時の構造が明確になり、親子関係の理解が簡単になるため後で見返した時にどこを修正する必要があるか等がわかりやすくなります。

変数を解説

Sassでは、変数を使って定義した変数の値を呼び出すことができます。

変数の使用例

変数の宣言

Sassで変数を利用するためには「$」を変数名の前につけて宣言します。

$base-color: #333;
$font-color: #fff;
$font-size-base: 16px;

上記はサイトの基本となるカラー、文字色、文字サイズを変数で宣言した例です。

変数の利用

nav {
  background-color: $base-color;

  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        color: $font-color;
      }
    }
  }
}

宣言した変数を呼び出す場合は宣言した時と同じように「$変数名」で呼び出すことができます。

変数を利用するメリット

変数を使うことで後でコードを書き換える際にとても楽になります。

$button-bg-color: #e74c3c;
$button-text-color: white;
$button-padding: 10px 20px;

.button {
  background-color: $button-bg-color;
  color: $button-text-color;
  padding: $button-padding;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darken($button-bg-color, 10%);
  }

  &.primary {
    background-color: $button-bg-color;
  }

  &.secondary {
    background-color: lighten($button-bg-color, 15%);
  }
}

上記コードのように変数を数箇所で利用していた場合を考えてみます。

変数ではなく毎回コードを書いていた場合、色を変えたい場合に全ての該当箇所のコードを書き換える必要がありますが、変数を利用していれば変数の宣言をしている箇所を変えるだけで色の変更が可能になります。