それでしたら今回は、簡単なチュートリアルを用意致しました。
こんにちは、よろと申します。
今回は、Sass(SCSS)の@importの使い方について、簡単なチュートリアルを用意してみました、
チュートリアルの出来上がり図は、適当過ぎて申し訳ないけどこんな感じ。
これにスタイルシートが当たってないとこんな感じ。
今回は、文字の色の変わり具合や、背景の色の違いなど、
ファイルがきちんと読み込まれているのか？というのが分かりやすいように、
ヘッダー(上部)と真ん中、フッター(下部)の３つに分けてみました。
そして、今回あらかじめ用意するファイルは、
・index.html
・cssフォルダ
・sassフォルダ
この３つ。
もし、基本的なScssの書き方が分からないという場合は、こちらの記事を始めに見てみるのもいいかも。
【Sass, Scssでコーディング】基本的な書き方からメリットを簡単に
それではまずは、HTML部分から、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// 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)はこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
// 全体的な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のヘッダー部分を切り取って貼り付ける。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// _header.scss header { height: 33vh; h1 { color: yellow; span { color: red; } } h2 { color: green; } h3 { color: green; } } |
「_main.scss」も「_footer.scss」も同じように、style.scssから必要な部分を切り取って貼り付け。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// _main.scss - style.scssの中心部分を切り取って貼り付ける。 .main { height: 33vh; h1 { color: blue; span { color: yellow; } } h2 { color: blue; } h3 { color: red; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// _footer.scss - style.scssのフッター部分を切り取って貼り付ける。 footer { height: 33vh; h1 { color: purple; span { color: white; } } h2 { color: white; } h3 { color: purple; } } |
そうすると、最終的に「style.scss」の中身はこんな感じになる。
|
1 2 3 4 5 6 7 8 9 |
// style.scss body { margin: 0; h1, h2, h3 { margin: 0; } } |
と、こんな感じでファイルを分割、
次に、今回は変数を扱う練習も兼ねて「_color.scss」の変数に、それぞれの背景色の色の設定を保存する。
|
1 2 3 4 5 |
// _color.scss - 色の設定の保存はここにしておいて、後から呼び出す。 $HeaderColor: #99f; // 薄い青 $MainColor: #f9f; // 薄いピンク $FooterColor: #9c3; // 薄い緑 |
それぞれのファイルの読み込み
ただ、この状態だと、まだ見た目は白黒のこんな感じで、HTMLしか表示されない。
なので、ヘッダー(上部)、真ん中部分、フッター(下部)それぞれのCSSを読み込むために、ここで使うのが、@import
@importを使って、ファイルを呼び出す。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 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」の変数を呼び出して使っているので、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// _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: $〇〇(変数名); という感じで、変数名で色を呼び出して使う。
そうする事によって、それぞれの背景画像が変わるはず。
これでファイルの読み込み方の、基本的なやり方の説明は終わり。
最後に
Sass(SCSS)はコーダーなら必須スキルで、今はこれらを使っていない会社の方が少ない位。
使い方としては、ヘッダー用のCSS、フッター用のCSSと分けておけば後で編集、管理をするのが楽だし、
例えば、
・_header.scss
・_main.scss
・_blog.scss
・_contact.scss
・_footer.scss
という風に使い分けてもいいし、
settingsフォルダを作って、その中に、
・_color.scss
・_font.scss
こんな感じで整理してファイルを別で作ってみてもOK。
ファイルを細かく分ける事によって、後から編集がしやすくなるし、他人が見ても比較的分かりやすくなる、
CSSが、上から下までむやみにダラダラと長くならずに済むし、慣れればいい事づくめで、とてもおすすめ。
終わり。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
FX＋いくつかのブログを運営。
たまにWeb制作や写真のお仕事、過去には動画撮影のお仕事も。
海外約50ヶ国を放浪中
海外生活が長い事もあり、英語と韓国語をある程度話せます
中国語に関しては、現在HSK4レベル
趣味は筋トレと海外旅行
YouTubeもやってます。
↓
Sass(Scss)の@importの使い方がいまいちよく分からない