【定番ツール】Webサイトのスタイルを効率的に作成する方法【Sass】 |

このような読者を想定しています

html+cssでWebサイトの構築を始めたい
Webサイトのスタイルをcssで記述している
cssを便利に記述できるSassの特徴を簡単に把握したい

このような方を対象にSassの便利な使い方を紹介し、cssの記述を効率的に行う手助けをしたいと思います。

この記事で学べる内容

Sassを使い始める方法
cssを便利に記述できるようにしたSassの特徴と使い方
- 変数の定義方法
- 入れ子構造(ネスト)
- 関数mixinの使い方

Sassとは
1. Sassの使い方
Sassの便利機能を紹介
終わりに

Sassとは

Sass: Syntactically Awesome Style Sheets

Syntactically Awesome Style Sheets

Sassはcssをより便利に記述できるようにしたものです。プリプロセッサと呼ばれ、Sassで記述したスタイルをコンパイラーで解釈させ、cssファイルが作成されます。
Visual Stdio Codeで使用する場合は拡張機能があるため、簡単に使うことができます。

Sassの使い方

Sassの拡張子は.scssにする。
scssファイルをコンパイルしてcssファイルを作成する
cssファイルはコンパイル時に上書きされるので、編集しないよう注意する

Visual Stdio Code(VSCode)を用いてSassを利用する方法を紹介します。
Sassを使うには、拡張子を.scssにしたファイルを用意し、拡張機能を有効にするだけです。
拡張機能を有効にするために、まずはその拡張機能「Live Sass Compiler」を追加します。VSCodeでは、左メニューの拡張機能から追加可能です。
あとは、下図のように「Watch my Sass」をクリックし、自動コンパイルを有効にするだけでcssファイルが自動で生成されるようになります。

Live Sass Compiler - Visual Studio Marketplace

Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime with live browser reload.

最後に注意点ですが、自動生成されたcssファイルは編集しないようにしましょう。scssにより上書きされてしまいますので。

Sassの便利機能を紹介

Sassではcssでは使えなかった多くの便利機能が追加されています。ここではどのような機能があるのか具体例とともに紹介します。

変数を利用できる

Sassでは$変数名: 値とすることで変数を定義できます。背景色や文字色、レイアウト調整のためのサイズなど変数化しておくことで管理が簡単になります。
変数を指定する場合は同じように$変数名として使用できます。

// SCSSファイル
// 変数は$変数名: 値、で定義します。
$bgcolor: rgb(215, 241, 255);

header {
  // 変数を使用する場合も$変数名で指定できます。
  background-color: $bgcolor;
}

// CSSファイル
header {
  // CSSファイルでは変数が置換されます。
  background-color: rgb(215, 241, 255);
}

入れ子構造(ネスト)にできる

親子関係にあるスタイルはネスト構造で表現できる
ネストの中では、＆セレクターで親を指定する
&セレクターは、複数クラスを持つタグを指定する場合など、半角スペースを挟む必要がない場合のみ省略可能

親子関係にあるスタイルを適用する際は、入れ子構造で記述することができます。
ネストして記述したSCSSがどのようにCSSに変換されるか見ていきます。
例として、次のようなSCSSを書いたとします。

$bgcolor: rgb(215, 241, 255);

.container {
	margin: 5px 0;

	// menuタグのスタイルをネスト
	& .menu {
		background-color: $bgcolor;
		border: 2px solid rgba(42, 92, 255, 0.5);

		// liタグのスタイルをネスト
		& > li {
			font-size: 24px;
		}
	}
}

containerクラスのスタイルに、menuクラスのスタイルがネストされており、さらにその中にliタグのスタイルがネストされています。
ネストの際に用いている&は親を指定するセレクターです。そのため「& .menu」では、「.container」を、「& > li」では、「.container . menu」を指しています。
これをCSSに変換した結果はこうなります。

.container {
  margin: 5px 0;
}

/* ネスト構造は、cssでは親子関係を表すセレクターに変換される */
/* &は親のセレクターに変換される */
.container .menu {
  background-color: #d7f1ff;
  border: 2px solid rgba(42, 92, 255, 0.5);
}

.container .menu > li {
  font-size: 24px;
}

ネストして記載したスタイルは、親子関係を表すセレクターとして、&は親のセレクターに変換されているのがわかります。

関数が利用できる

Sassの@mixinという機能を用いると、スタイルを作成する際も関数のような記載ができます。

mixinの基本的な使い方

mixinを定義する：
@mixin 関数名(引数) {適用するスタイル}
定義したmixinを使用する：
@include 関数名(引数:値)

次の例では背景色と文字色を変更するmixinを定義し、btnタグのhover処理の中で定義したmixinを使用しています。

// mixinで関数を定義(背景色と文字色を指定された値に更新する)
// 引数に:で初期値を指定することができる。
@mixin mixin_hover($hover_bgcolor: black, $hover_color: white) {
	background-color: $hover_bgcolor;
	color: $hover_color;
}

.btn:hover {
  // 引数は省略可能だが、記載した方が分かりやすい。
	@include mixin_hover($hover_bgcolor: black, $hover_color: white);
}

終わりに

cssを便利に記載するツールSassについて、基本的な使い方を紹介しました。
Sassを使うことで、変数の定義、ネスト構造の実現、関数の定義といった機能が利用可能になり、cssによるスタイル作成の効率が向上し、管理もしやすくなります。
Sassには今回紹介した機能以外にも便利な機能がありますので、引き続き便利な機能を紹介していきたいと思います。