morderblog 新しいことに挑戦する人を応援するメディア

【Sass入門】変数の使い方を分かりやすく解説

【Sass入門】変数の使い方を分かりやすく解説

こんにちは。macco（まっこ）です。

前回はSassの基本機能の1つネスト（入れ子）について簡単に解説しました。

【Sass入門】ネスト（入れ子）の書き方を分かりやすく解説

今回はSassを学んでいる方または学習中の方に向けて、変数の意味や簡単な使い方について解説していこうと思います。

目次

こんな人にオススメ

  • Sassの変数の使い方を知りたい
  • Sassの開発環境の準備は済んでいる
  • 変数ってそもそも何かわからない

変数とは

はじめに今までプログラミングを学習したことがない人に向けて簡単に説明すると、

変数とはデータ（値）を入れておく箱のようなものです。

箱に好きな名前を付けることができて、使いたい箇所でその箱の名前を指定すると、箱の中にある値を使うことができます。

参考までにJavaScriptで書いた例を見てみます。

let color = '赤';

上記はcolorという変数を宣言し、文字列の赤をcolorに代入しています。
※colorが変数名になります。

コンソール上に赤を表示する書き方は、以下のとおりです。

console.log(color);

実行するとcolorに赤という文字列が代入されているため、コンソール上に赤と表示されます。

変数のイメージを表した図を以下に用意しました。
Sassの時点ではそこまで神経質に覚える必要がないので、さらっと流していきましょう。

なぜ変数が便利なのか

先に結論をいうと、変数を使うことでプロパティ値を一ヶ所で管理できるようになることです。
※ここでは分かりやすくするため、プロパティ値のみに限定します。

通常Webサイトのボリュームが大きくなるにつれて、同じようなプロパティ値を指定することが多くなります。

変数を使用することで以下の効果が期待できます。

  • プロパティ値自身の役割を明確にする
  • 視認性が向上する
  • 柔軟性が向上する（プロパティ値の修正に強くなる）

実際に変数を使ってみる

では実際に変数を使ってみましょう。

Sassの開発環境が用意できていない方は以下の記事をご参考ください↓

【Sass入門】VSCode拡張機能LiveSassCompilerを使ってSass開発環境を構築する

変数を宣言する書き方は特に難しくなく、ダラー（$記号）を先頭にし、変数名とコロン、続いてプロパティ値を書き、セミコロンで終わりにします。

最初のうちは分かりやすさを重視し、変数名を英小文字からスタートするようにしましょう。
※ダラー直後に数字、アットマーク等の使えない記号やハイフンが2つ続く場合はエラーになります。

$変数名: プロパティ値;

簡単なサンプルを用意しましたので順番に見ていきましょう。
HTML
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <title>【Sass入門】変数のテスト</title>
  <!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main class="main">
    <div class="box-main">
      <h1>Sass Variable</h1>
      <p>変数を実際に使ってみます</p>
      <a href="#">詳細はこちら</a>
    </div>
    <div class="box-other">
      <a href="#">他の説明ページを見る</a>
    </div>
  </main>
</body>
</html>

Sassファイルです。
style.scss

body {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.main {
  width: 720px;
  background-color: #f5f5f5;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid #ff69b4;
  border-radius: 8px;
  .box-main {
    padding: 24px;
    border: 1px solid #ff69b4;
    border-radius: 8px;
    a {
      color: #4169e1;
    }
  }
  .box-other {
    text-align: right;
    a {
      color: #4169e1;
    }
  }
}

Sassファイルをコンパイルし、CSSファイルに変換します。
ブラウザで確認すると以下の画面が表示されます。

共通しているプロパティ値を2つほど変数として宣言し、使ってみましょう。

  • ボックスの線
  • テキストリンクの色

style.scss

$box_border: 1px solid #ff69b4;
$link_text_color: #4169e1;

body {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.main {
  width: 720px;
  background-color: #f5f5f5;
  margin: 0 auto;
  padding: 24px;
  border: $box_border;
  border-radius: 8px;
  .box-main {
    padding: 24px;
    border: $box_border;
    border-radius: 8px;
    a {
      color: $link_text_color;
    }
  }
  .box-other {
    text-align: right;
    a {
      color: $link_text_color;
    }
  }
}

プロパティ値を指定するところに変数名を指定すると、変数の箱に入っているプロパティ値を取り出すことができます。

border: $box_border;
color: $link_text_color;

もう一度Sassファイルをコンパイルし、CSSファイルに変換してからブラウザで確認してみてください。

変数の宣言と取り出しが正常に処理されているため、先ほどと表示が変わっていないことが確認できます。

最後に

今回は一般的な変数の意味とSassでの変数の使い方について、簡単に解説してきましたがいかがでしたでしょうか。

Sassの変数はプロパティ値だけではなく、キーワードの一部（セレクタなど）を変数の値として使用したり（インターポレーション）、ローカル変数、グローバル変数という概念やデータ型があったりと色々奥が深いです。

インターネットで調べると色々情報がでてきますので、興味がある方は探求してみてください。

最後までお読みいただきありがとうございました。

プログラミングカテゴリの最新記事