1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【画像つき】Sassでファイルをパーツごとに管理する方法

Posted at

①partsフォルダに作りたい部品をいれる

Sassフォルダ直下にstyle.scssを置き
partsフォルダにFooterとHeaderを入れました
分割.PNG

②それぞれのフォルダに記述する

styleフォルダに「@use "フォルダ名/パーツ名.scss"」を記入して部品ファイルを読み込みます
パーツが増えたら都度追加します
記入.PNG

③CSSファイルを確認する

上記を入力し保存したあとCSSファイルにこのように
CSSが生成されています
CSS表示.PNG

①SassファイルのCSSを生成しない方法

Sassファイルの先頭に_(アンダースコア)をつけます。
ファイル名の頭に_がついているファイルは保存してもCSSファイルを生成しません。
これをパーシャルファイルと呼びます。

②ファイル名を変更し各ファイルをコンパイルする

CSSファイルの生成をさせたくないファイルに_(アンダースコア)を付けてファイル名を変更します
パーシャル.PNG
更にSassファイル「style.css」の読み込みファイル名も変更し
各ファイルをコンパイルします
※_(アンダースコア)と拡張子は省略して書くことが可能

記述されていないか確認するためにCSSを各パーツに追加しました
パーシャル2.PNG

③保存して確認

生成されたCSSファイルにはアンダースコアを付けた後記述したCSSが反映されていませんでした
パーシャル3.PNG

ファイルの管理 応用編

partsフォルダ内に目次用Sassファイル「_index.scss」を追加します_index.PNG
「style.scss」「_index.scss」に読み込みたい場所のパスを記述する
応用.PNG

目次の「_index.scss」で部品をまとめる→
「style.css」で「_index.scss」フォルダを追加しコンパイルする→
CSSが書き出されるという流れになります

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?