SCSSの便利な使い方

はじめに
1. ネスト構造
2. 変数
3. 関数
4. 継承
5. メディアクエリ
SCSSの便利な使い方（続き）
6. まとめ

はじめに

CSSプリプロセッサであるSCSSは、CSSをより記述しやすく、メンテナンスしやすくする機能を提供します。ネスト構造や変数、関数など、様々な機能を活用することで、CSSコードをよりスマートに書くことができます。

mixinに関しては以前の記事をご参照ください

1. ネスト構造

SCSSは、CSSをネスト構造で記述することができます。これは、HTMLの構造と同様にコードを記述できるため、視覚的に分かりやすく、メンテナンスもしやすくなります。

nav {
  background-color: #333;
  padding: 10px;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 20px;

      a {
        color: #fff;
        text-decoration: none;
        padding: 5px 10px;
      }
    }
  }
}

上記のように、ネスト構造を用いることで、コードの階層関係を明確に表現することができます。

2. 変数

SCSSは、変数を使用して、同じ値を何度も繰り返し使用するのを防ぐことができます。これにより、コードが簡潔になり、メンテナンス性も向上します。

$base-color: #333;

nav {
  background-color: $base-color;
  padding: 10px;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 20px;

      a {
        color: #fff;
        text-decoration: none;
        padding: 5px 10px;
      }
    }
  }
}

footer {
  background-color: $base-color;
  padding: 10px;
  text-align: center;
}

上記のように、$base-colorという変数を定義し、navとfooterの背景色に同じ色を設定しています。

3. 関数

SCSSは、関数を使用して、コードを再利用することができます。これにより、コードが簡潔になり、メンテナンス性も向上します。

@function border-radius($width, $height) {
  border-radius: $width / $height;
}

.button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  @include border-radius(2, 5);
}

上記のように、border-radiusという関数を定義し、.buttonクラスに適用しています。

4. 継承

SCSSは、既存のCSSクラスを継承して、新しいクラスを作成することができます。これにより、コードを重複させることなく、共通のスタイルを定義することができます。

.base-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.primary-button {
  @extend .base-button;

  border-radius: 2px;
}

.secondary-button {
  @extend .base-button;

  border-radius: 5px;
}

上記のように、.base-buttonクラスを継承して、.primary-buttonと.secondary-buttonクラスを作成しています。

5. メディアクエリ

SCSSは、メディアクエリを使用して、デバイスや画面サイズに応じてスタイルを変化させることができます。

@media (max-width: 768px) {
  nav ul li {
    display: block;
    margin: 10px 0;
  }
}

上記のように、メディアクエリを使用して、画面幅が768px以下の場合、nav ul liのスタイルを変更しています。

SCSSの便利な使い方（続き）

6. まとめ

SCSSは、CSSをより記述しやすく、メンテナンスしやすくする機能を提供します。ネスト構造、変数、関数、継承、メディアクエリなど、様々な機能を活用することで、CSSコードをよりスマートに書くことができます。

本記事で紹介した機能以外にも、SCSSには様々な便利な機能があります。ぜひ色々試してみて、SCSSをマスターしてください。