月: 2022年1月

ディレクトリと用途

scss
  ┣ global　必要箇所で@use "../global" as g;して使う
  ┃  ┣ _index.scss
  ┃  ┣ _variable.scss
  ┃  ┗ _mixin.scss …
  ┃
  ┣ foundation　共通のデフォルト設定
  ┃  ┣ _index.scss
  ┃  ┣ _setting.scss　コメント
  ┃  ┣ _sanitize.scss　リセットスタイル
  ┃  ┗ _base.scss　共通のスタイル
  ┃
  ┣ layout　共通のページのレイアウト
  ┃  ┣ _index.scss
  ┃  ┣ _container.scss
  ┃  ┣ _header.scss
  ┃  ┗ _footer.scss …
  ┃
  ┣ component　共通モジュール
  ┃  ┣ _index.scss
  ┃  ┣ _button.scss
  ┃  ┗ _link.scss …
  ┃
  ┣ project　ページ毎に固有のモジュール（他のページで使わない）
  ┃  ┣ top
  ┃  ┃  ┣ _index.scss
  ┃  ┃  ┣ _card.scss
  ┃  ┃  ┗ _profile.scss …
  ┃  ┃
  ┃  ┗ ページ名 …
  ┃
  ┣ utility helper的にさくっと使えるもの
  ┃  ┣ _index.scss
  ┃  ┣ _display.scss
  ┃  ┣ _margin.scss
  ┃  ┣ _padding.scss
  ┃  ┗ _typography.scss
  ┃
  ┗ style.scss

FLOCSSのディレクトリ構成を参考にしました。
階層を深くしたくなかったので、component project utility は、object ディレクトリを使わずにroot直下に置きました。

また、object という読み込み様のディレクトリを作成しています。
変数など使いたいファイルで@use "../global" as g;して、globalを読み込んで、g.$variable や@include g.mq(){}といった形で利用可能です。

Sassの@importが廃止

Sassの@importが2022年に廃止されます。来たる日に向けて、@importを@useに置き換えました。

EasySassだと@use, @forwordが使えない

トランスパイルには、VSCodeのExtentionsのEasySassを使っていたのですが、どうやらEasySassは、Node製ではないようで、うまくトランスパイルされません。
代わりに「DartJS Sass Compiler and Sass Watcher」というExtentionsに乗り換えました。

パーシャル編集時にも、自動でトランスパイルさせる

このままでは、パーシャル以外のscssファイルを保存した時にしかトランスパイルされません。実作業では、パーシャルのファイルを編集していくことになるので、パーシャルのファイルが保存された時にトランスパイルしたいです。
これは、以下のブログに記載されていた設定で実現できました。

【VSCode】Dart Sassが使える拡張機能 – DartJS Sass Compiler and Sass Watcherの使い方

試しにSass Watcherを使わずに作業したら、パーシャルファイルの保存時に、トランスパイルされました。（追記：2022.01.20）