Figmaでつくっていくサイトの構造が把握できてきたら、Sassが導入できるようにFLOCSSに従ったSassのフォルダ郡を作成していきます。

今回は、CSSを効率的に書くSassという書き方と、クラス名やスタイリングを管理しやすくするCSS設計の1つであるFLOCSSを用いてコーディングしていきます。

Sass×FLOCSSに適したフォルダを作成する

それではおまたせしました。

Sass×FLOCSSに適したフォルダを作成していきます。

先程も例として挙げましたが、実際のFigmaで当てている構成をもとにフォルダを作成していきましょう。

まずは、新規フォルダを作成します。
今回はsass-flocss-tutorialと名付けます。

そして、sass-flocss-tutorialのなかにさらにフォルダを追加していきましょう。
今回は以下のようなフォルダ構成で進めます。

└─asset
    ├─css
    ├─img
    └─scss
        ├─foundation
        ├─layout
        └─object
            ├─component
            ├─project
            └─utility

画像ファイルや各Scssファイルなどを準備する

ここからさらにindex.htmlやstyle.scssなどを追加していきます。

index.htmlを追加する

sass-flocss-tutorial直下にindex.htmlファイルを作成。（まだ何も書かなくて大丈夫です）

imgフォルダに画像を追加する

次に、imgフォルダに画像を追加していきます。

画像はこちらから一括ダウンロードできるので、ダウンロードしてimgフォルダに追加していきましょう。

以下のように配置したら大丈夫です。

img
  favicon.ico
  fv-book.webp
  header-logo.svg
  ogp.jpg

style.scssを追加する

次に、scssフォルダ直下にstyle.scssを作成します。
このstyle.scssは、他のScssファイルを一括でコンパイルさせるためのScssファイルになります。

style.scssファイルは一旦何も書かなくて大丈夫です。

現時点でのフォルダ構成

ここまでのフォルダ構成をまとめます。

│  index.html
│
└─asset
    ├─css
    │
    ├─img
    │      favicon.ico
    │      fv-book.webp
    │      header-logo.svg
    │      ogp.jpg
    │
    └─scss
        │  style.scss
        │
        ├─foundation
        │
        ├─layout
        │
        └─object
            ├─component
            │
            ├─project
            │
            └─utility

この構成をもとに、index.htmlやScssをコーディングしていきます。

次の章ではindex.htmlを実際にコーディングしていきますね。