【Sass, SCSS】@importの使い方基本の書き方・簡単チュートリアルで練習

困ってる人

Sass(Scss)の@importの使い方がいまいちよく分からない

それでしたら今回は、簡単なチュートリアルを用意致しました。

オペレーター

こんにちは、ヨロと申します。

今回は、Sass(SCSS)の@importの使い方について、簡単なチュートリアルを用意してみました、

チュートリアルの出来上がり図は、適当過ぎて申し訳ないけどこんな感じ。

これにスタイルシートが当たってないとこんな感じ。

今回は、文字の色の変わり具合や、背景の色の違いなど、

ファイルがきちんと読み込まれているのか？というのが分かりやすいように、

ヘッダー(上部)と真ん中、フッター(下部)の３つに分けてみました。

そして、今回あらかじめ用意するファイルは、

・index.html
・cssフォルダ
・sassフォルダ

この３つ。

もし、基本的なScssの書き方が分からないという場合は、こちらの記事を始めに見てみるのもいいかも。

【Sass, Scssでコーディング】基本的な書き方からメリットを簡単に

それではまずは、HTML部分から、

// HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Sass簡単チュートリアル</title>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>

	<header>
		<h1>ヘッダー H1<span>！</span></h1>
		<h2>ヘッダー H2</h2>
		<h3>ヘッダー H3</h3>
	</header>

	<div class="main">
		<h1>真ん中 H1<span>！</span></h1>
		<h2>真ん中 H2</h2>
		<h3>真ん中 H3</h3>
	</div>

	<footer>
		<h1>フッター H1<span>！</span></h1>
		<h2>フッター H2</h2>
		<h3>フッター H3</h3>
	</footer>

</body>

</html>

そしてCSS部分(今回はSCSS)はこんな感じ。

// 全体的なSCSS

body {
	margin: 0;

	h1, h2, h3 {
		margin: 0;
	}
}

header {

	height: 33vh;

	h1 {
		color: red;

		span {
			color: purple;
		}
	}

	h2 {
		color: green;
	}

	h3 {
		color: yellow;
	}

}

.main {

	height: 33vh;

	h1 {
		color: blue;

		span {
			color: yellow;
		}
	}

	h2 {
		color: white;
	}

	h3 {
		color: red;
	}

}

footer {

	height: 33vh;

	h1 {
		color: green;

		span {
			color: white;
		}
	}

	h2 {
		color: purple;
	}

	h3 {
		color: black;
	}

}

ファイルを分ける

これら２つのファイルがそれぞれ出来上がったら「style.scss」を、

↓

_header.scss // ヘッダー部分専用のSCSSファイル
_main.scss // 真ん中部分専用のSCSSファイル
_footer.scss // フッター部分専用のSCSSファイル
_color.scss // 変数によく使う色をまとめたSCSSファイル

こんな感じで分けていく。

「_header.scss」に関しては、style.scssのヘッダー部分を切り取って貼り付ける。

// _header.scss

header {

	height: 33vh;

	h1 {
		color: yellow;

		span {
			color: red;
		}
	}

	h2 {
		color: green;
	}

	h3 {
		color: green;
	}

}

「_main.scss」も「_footer.scss」も同じように、style.scssから必要な部分を切り取って貼り付け。

// _main.scss - style.scssの中心部分を切り取って貼り付ける。

.main {

	height: 33vh;

	h1 {
		color: blue;

		span {
			color: yellow;
		}
	}

	h2 {
		color: blue;
	}

	h3 {
		color: red;
	}

}

// _footer.scss - style.scssのフッター部分を切り取って貼り付ける。

footer {

	height: 33vh;

	h1 {
		color: purple;

		span {
			color: white;
		}
	}

	h2 {
		color: white;
	}

	h3 {
		color: purple;
	}

}

そうすると、最終的に「style.scss」の中身はこんな感じになる。

// style.scss

body {
	margin: 0;

	h1, h2, h3 {
		margin: 0;
	}
}

と、こんな感じでファイルを分割、

次に、今回は変数を扱う練習も兼ねて「_color.scss」の変数に、それぞれの背景色の色の設定を保存する。

// _color.scss - 色の設定の保存はここにしておいて、後から呼び出す。

$HeaderColor: #99f; // 薄い青
$MainColor: #f9f; // 薄いピンク
$FooterColor: #9c3; // 薄い緑

それぞれのファイルの読み込み

ただ、この状態だと、まだ見た目は白黒のこんな感じで、HTMLしか表示されない。

なので、ヘッダー(上部)、真ん中部分、フッター(下部)それぞれのCSSを読み込むために、ここで使うのが、@import

@importを使って、ファイルを呼び出す。

// style.scss

@import "header.scss"; // ここでヘッダー部分のCSS(SCSS)を呼び出す。
@import "main.scss"; // ここで中心部分のCSS(SCSS)を呼び出す。
@import "footer.scss"; // ここでフッター部分のCSS(SCSS)を呼び出す。

body {
	margin: 0;

	h1, h2, h3 {
		margin: 0;
	}
}

ここまでいければこんな感じで、それぞれのCSSファイルを読み込む事が出来る。

ただ、このままだとまだ背景色が変わっていないので「_color.scss」に保存した色の設定を呼び出す。

「_header.scss」「_main.scss」「_footer.scss」では、それぞれ背景色を「_color.scss」の変数を呼び出して使っているので、

// _header.scss

@import "color.scss"; // ここで、_color.scssの設定を使うように呼び出す。

header {

	height: 33vh;
	background-color: $HeaderColor; // ここで背景色の設定(色は変数名で呼び出し)

	h1 {
		color: red;

		span {
			color: purple;
		}
	}

	h2 {
		color: green;
	}

	h3 {
		color: yellow;
	}

}

「_main.scss」「_footer.scss」も同じように、@import “color.scss”; でファイルの設定を読み込んで、

background-color: $〇〇(変数名); という感じで、変数名で色を呼び出して使う。

そうする事によって、それぞれの背景画像が変わるはず。

これでファイルの読み込み方の、基本的なやり方の説明は終わり。