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

man

困ってる人

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

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

operator

オペレーター


こんにちは、よろと申します。

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

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

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


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

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

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

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

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

この3つ。

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

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

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

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

ファイルを分ける

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「_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が、上から下までむやみにダラダラと長くならずに済むし、慣れればいい事づくめで、とてもおすすめ。

終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール