scssのディレクトリ構成

ディレクトリと用途

scss
global 必要箇所で@use "../global" as g;して使う
  ┃  ┣ _index.scss
  ┃  ┣ _variable.scss
┗ _mixin.scssfoundation 共通のデフォルト設定
  ┃  ┣ _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)

コメントを残す

メールアドレスが公開されることはありません。