SCSSで色を変数に設定

SCSSで色を変数に設定

SCSSで色を変数に設定する方法について説明します。

SCSS（Sassy CSS）は、CSSの拡張であり、より効率的にスタイルを管理するための機能を提供します。
その中でも、色を変数に設定することで、スタイルシート全体で一貫性を持たせたり、変更を簡単に行うことができます。
以下では、色を変数に設定し、それを利用してスタイルを適用する方法について説明します。

SCSSでの色変数の定義

SCSSでは、色を変数に設定することで、スタイルを管理しやすくすることができます。
変数は $ 記号で定義され、色だけでなく他のプロパティにも使用できます。
以下は、基本的な色変数の定義例です。

// colors.scss
$primary-color: #3498db; // 青
$secondary-color: #2ecc71; // 緑
$accent-color: #e74c3c; // 赤

色変数を使用する

変数を定義した後は、これらをCSSのプロパティに使用することができます。
例えば、背景色や文字色を変数で設定することができます。

// styles.scss
@import 'colors'; // colors.scssをインポート

body {
  background-color: $primary-color;
  color: $secondary-color;
}

button {
  background-color: $accent-color;
  border: none;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;

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

色変数の変更と再利用

色変数を使うことで、スタイルの変更が容易になります。
例えば、テーマの変更やカラースキームの変更が必要な場合は、変数の値を変更するだけで済みます。
以下は、変数の値を変更するだけで全体のデザインが変わる例です。

// colors.scss
$primary-color: #1abc9c; // 新しい青
$secondary-color: #f39c12; // 新しい緑
$accent-color: #d35400; // 新しい赤

このように、SCSSの変数を使用することで、スタイルシートの保守性が向上し、一貫性を持たせることができます。
また、変数を利用することで、スタイルの変更やデザインの調整が簡単に行えるため、大規模なプロジェクトや複数のテーマを持つプロジェクトにおいて特に有用です。