2.0 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
587d7dbf367417b2b2512bbc	パーシャルを使用してスタイルを小分けする	0	301459	split-your-styles-into-smaller-chunks-with-partials

--description--

Sass のパーシャルは、CSS コードの一部分を保持する別のファイルです。これらのファイルは他の Sass ファイルにインポートして使用します。この機能は、類似したコードをモジュールにまとめて整理するのにとても便利です。

パーシャルの名前はアンダースコア (_) 文字で始まります。これにより、パーシャルが CSS の小さなセグメントであり、CSS ファイルに変換しないよう Sass に指示します。また、Sass ファイルは .scss ファイル拡張子で終わります。パーシャル内のコードを別の Sass ファイルに含めるには @import ディレクティブを使用します。

たとえば、すべてのミックスインが "_mixins.scss" という名前のパーシャルに保存されていて、"main.scss" ファイルで必要な場合は、次の方法でメインファイルで使用します。

@import 'mixins'

Sass はパーシャルであることを認識しているので、import ステートメントではアンダースコアとファイル拡張子は不要です。パーシャルをファイルにインポートすると、すべての変数やミックスインやその他のコードを使用できるようになります。

--instructions--

_variables.scss というパーシャルを main.scss ファイルにインポートする @import ステートメントを記述してください。

--hints--

コードで @import ディレクティブを使用します。ファイル名にはアンダースコアを付けません。

assert(code.match(/@import\s+?('|")variables\1/gi));

--seed--

--seed-contents--

<!-- The main.scss file -->

--solutions--

@import 'variables'

2.0 KiB Raw Blame History