SCSSでhover時のセレクタ

CSS SCSS

SCSSでhover時のセレクタ

SCSS（Sassy CSS）は、CSSのプリプロセッサで、より効率的にスタイリングを行うための機能がいくつか提供されています。
SCSSでのhover時のセレクタの使用方法について説明します。

hoverセレクタは、ユーザーが要素にマウスを乗せたときに適用されるスタイルを指定します。
SCSSでは、ネストを使ってこのセレクタを簡単に管理できます。
ここでは、SCSSでのhoverセレクタの基本的な使い方と、いくつかの例を示します。

基本的な使用法

SCSSでhoverセレクタを使用するには、対象となる要素のスタイルを定義し、その内部で&:hoverを使ってホバー時のスタイルを記述します。
&は、親セレクタを参照するためのもので、これによりhoverセレクタが親セレクタに適用されるようになります。

// SCSSコード
.test-button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
    color: #ecf0f1;
  }
}

この例では、.test-buttonクラスを持つボタンの通常状態とホバー時のスタイルを定義しています。
&:hoverは、.test-button:hoverに変換され、ボタンにマウスを乗せたときのスタイルを指定します。

複数のセレクタに対するhover効果

複数の要素に対してhover効果を適用する場合も、ネストを利用することでコードを整理できます。
以下の例では、複数のボタンに対して異なるホバー効果を設定しています。

// SCSSコード
.test-container {
  .test-button-primary {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;

    &:hover {
      background-color: #2980b9;
      color: #ecf0f1;
    }
  }

  .test-button-secondary {
    background-color: #2ecc71;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;

    &:hover {
      background-color: #27ae60;
      color: #ecf0f1;
    }
  }
}

この例では、.test-container内に.test-button-primaryと.test-button-secondaryの2つのボタンがあり、それぞれに異なるホバー効果が適用されています。

動的なhoverスタイル

SCSSでは、変数や関数を使って動的にホバー時のスタイルを設定することも可能です。
以下の例では、変数を使ってボタンの色を設定し、ホバー時に色を変更しています。

// SCSSコード
$button-bg-color: #3498db;
$button-hover-bg-color: #2980b9;
$button-text-color: white;
$button-hover-text-color: #ecf0f1;

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

  &:hover {
    background-color: $button-hover-bg-color;
    color: $button-hover-text-color;
  }
}

この方法を使用すると、ボタンの背景色やテキスト色を変数で管理しやすくなり、テーマの変更やスタイルの再利用が簡単になります。

まとめ

SCSSでhoverセレクタを使用すると、スタイルのネストや変数を利用して、より効率的にスタイリングを行うことができます。
&:hover構文を使うことで、親セレクタに対するホバー効果を簡単に指定でき、スタイルの管理が容易になります。