チャプター５では、Sassで使用されるファイルの分割やインポートについて学びます。
「CSSを効率的に書く！Sassの入門講座」の第５章です。この講座については以下から確認できます。
ファイルの分割、パーシャルについて
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;
}chapter05の解答
以下が「style.scss」を２つのファイルに分けた場合の解答になります。
@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;SCSSでカラーやフォントを別ファイルに記述して読み込むことにより、以下のようなメリットがあります。
- スタイルをより効率的に管理できる
- コードの再利用ができる
- チーム開発がしやすい
リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
チャプター５ 「ファイルの分割とインポートを理解する」のまとめ
チャプター5では、Sassでのファイルの分割とインポートについて学びました。
@useを使用することで、別のSassファイルをインポートすることができる。- 「ネストインポート」という機能を使用することで、セレクタ内でのみ使用される変数を定義することができる。
@importを使用することは推奨されていないので、@useを使用する。
ファイルを分割することで、コードをより管理しやすくすることができます。
チャプター
次章では、Sassの基本の「制御構文を理解する」学びます。
コメント