Sass/SCSS入門講座 ５章 ファイルの分割とインポートを理解する

チャプター５では、Sassで使用されるファイルの分割やインポートについて学びます。

「CSSを効率的に書く！Sassの入門講座」の第５章です。この講座については以下から確認できます。

講座の始まり

CSSを効率的に書く！Sassの入門講座　全8章 　この講座では「Sassの入門講座」を初心者の方でも問題ないように初歩の解説から小テストや実践を通して解説します。 ８章構成の講座になっていますので、気になってい…

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

ファイルの分割、パーシャルについて

Sassでは、複数のSassファイルを組み合わせることで、より複雑なスタイルシートを作成することができます。

これを実現するために、「パーシャル」と呼ばれる小さなSassファイルを作成することができます。

パーシャルは、_で始まる名前を持つSassファイルです。

例えば、「_variables.scss」や「_mixins.scss」などです。これらのSassファイルは、@useを使用してインポートすることができます。

以下のように記述することで、「_variables.scss」というSassファイルをインポートすることができます。

@use "variables" as *;

CSSのインポートとSassのインポートの違い

Sassでは、@useを使用することで、Sassファイルのみをインポートすることができます。一方で、CSSでは、@importを使用することで、CSSのみをインポートすることができます。

Sassでは、@useを使用することで、@importと同様の機能を実現することができます。しかし、@importを使用することでも、CSSをインポートすることができます。

このため、Sassでは@importを使用することは推奨されません。

Sassでファイルをインポートする際には、@useを使用するようにしましょう。

やってみよう！１つのScssファイルを２つのファイルに分割してみよう

　教材のChapter05のquestionのフォルダ内の「style.scss」を２つのファイル「style.scss」と「_variables.scss」に分けて、分けた「style.scss」から「_variables.scss」を読み込んでみましょう。

「_variables.scss」には、カラーとフォントの変数のみを分けて記述しましょう。

$primary-color: #ff0000;
$secondary-color: #00ff00;
$tertiary-color: #0000ff;

$font-stack: Arial, sans-serif;

body {
  font-family: $font-stack;
}

.parent {
  color: $primary-color;
}

.child {
  color: $secondary-color;
}

.grandchild {
  color: $tertiary-color;
}

@use 'variables' as *;

body {
  font-family: $font-stack;
}

.parent {
  color: $primary-color;
}

.child {
  color: $secondary-color;
}

.grandchild {
  color: $tertiary-color;
}

$primary-color: #ff0000;
$secondary-color: #00ff00;
$tertiary-color: #0000ff;

$font-stack: Arial, sans-serif;

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

チャプター５　「ファイルの分割とインポートを理解する」のまとめ

チャプター5では、Sassでのファイルの分割とインポートについて学びました。

ファイルを分割することで、コードをより管理しやすくすることができます。

チャプター

次章では、Sassの基本の「制御構文を理解する」学びます。

前のチャプター

Sass/SCSS入門講座 ４章 配列とマップの基本を理解する チャプター４では、Sassで使用される配列とマップについて解説します。 「CSSを効率的に書く！Sassの入門講座」の第４章です。この講座については以下から確認できます…

次のチャプター

Sass/SCSS入門講座 ６章 制御構文を理解する 　チャプター6では、Sassでの制御構文について解説します。制御構文を使用することで、より効率的にCSSを記述することができるようになります。 「CSSを効率的に書く！S…