webコーディング初心者です。
初心者なりに学びがあったのでここに記しておきます。
どのくらい初心者かというと、SassのコンパイルをVScodeのプラグインで行っているくらいです。gulpの実装わからなすぎる
cssをSassに置き換えていく作業をする際にエラーが吐かれまくって困ったので、解決した際の覚書を共有します。
インターネット老人会会員なのでこういうアウトプット大切にしていきたい。。
Sassのデータ管理
好みはあるかもしれませんが、概ねのデータの階層としては下記を参考にいただければわかりやすいと思います。
root
├ dust - style.css
|
├ foundation ┬ _index.scss
| ├ _color.scss
| ├ _base.scss
| ├ _reset.scss
| …
|
├ conponent -┬ _index.scss
| ├ _button.scss
| ├ _card.scss
| ├ _accordion.scss
| …
|
├ pages -----┬ _index.scss
| ├ _top.scss
| ├ _profile.scss
| ├ _about.scss
| …
…
└ style.scss
関数を使用したscssをフォルダにまとめておけたら、より楽かも
ここで注目すべき点は、各フォルダ内に入っている_index.scssです。
フォルダ内のscssを、まずは_index.scssにまとめて記載し読み込ませます。
これにより、さらなる効率化が期待できるかも。
下記が、_index.scssの中身です。
@forward "color";
@forward "base";
@forward "reset";
…
@use "button.scss";
@use "card";
@use "accordion";
…
@use "top.scss";
@use "profile";
@use "about";
…
ここでの注意点は、colorやbaseなどの関数を含むscssは、@forwardで読み込むこと。
先に注意点として挙げた関数のscss〜というのはこのため。
次に、style.scssに@useで各フォルダの_index.scssをまとめて読み込みます。
下記は、style.scssの中身です。
@use "foundation";
@use "conponent";
@use "pages";
…
関数の呼び出し
また、各scssで関数を呼び出す際には下記の記載が必要となります。
@use "../hoge" as *;
../hogeは、関数を記載したscssのディレクトリを指定。
今まで通りのscssの書き方をしたい人は、'*'を、そのまま'*'と記載した方が楽です。
'*'を任意の文字列に設定することも可能ですが、その際はscssの記載を下記のようにしないといけないので個人的には面倒なので'*'一強かと。
@use "../hoge" as huga;
body {
background-color: huga.$bgColor;
}
上記に記載した点に気をつけてscssの作成と読み込みをし、
コンパイルを行えば効率的にSassを使える感じがします（適当）。
gulpを組み込めればいいのですが、私はここでVScodeのLive Sassに頼っております。
Watch Sass!
これからは忘れないよう新規作成の際から注意してディレクトリ作成していこうと思います。
今後の自分の学びのためにも書き留めておきました。
間違っている点があれば指摘いただけると助かります。
gulpが実装できたらまた記事を書きたい。