FigmaやHTMLのコーディングをする前に、まずはSassやFLOCSSの前提知識を抑えながら、今回必要な環境を構築していきます。

Sassとは？

Sassは、CSSをより効率的に書けるようにしたメタ言語です。
これだけだと意味わからないと思うので、具体的なコードの例を紹介します。

こういう一般的なHTMLがあったとき、

<section class="p-section">
	<h2>Title</h2>
</section>

CSSはそれぞれのクラスやタグに対してスタイリングします。

.p-section {
	padding: 1rem 3rem 4rem;
}
.p-section h2 {
	font-size: 3.2rem;
}

ただ、CSSだと全て左寄せの書き方になってしまう以上、HTML と違って構造が視覚的にわかりにくいです。
Sassだと、HTMLのように入れ子でスタイリングすることができます。

.p-section {
	padding: 1rem 3rem 4rem;

	h2 {
		font-size: 3.2rem;
	}
}

Sassのような入れ子構造のスタイリングは、HTMLの構造と似たかたちになるため、視覚的にどこをスタイリングしているかわかりやすくメンテナンスがしやすいです。

ただ、SassのままHTMLを読み込むことはできません。
なので、Sassを書いた際はCSSにコンパイルという変換作業をする必要があります。コンパイルする環境を次で紹介します。

Sassをコンパイルする環境を構築する

本書では、SassからCSSへコンパイルする際は、VisualStudioCodeの拡張機能を用います。

DartJS Sass Compiler and Sass Watcher をインストール

まず、DartJS Sass Compiler and Sass Watcher をインストールします。

インストールして再起動すればすぐに使えます。

Sass→CSS のコンパイル

VSCodeの設定から、setting.jsonを以下のように反映させます。

以下のように setting.json を編集すると asset/css ディレクトリのなかに style.css と style.min.css がコンパイルされます。

{
	"dartsass.targetDirectory": "asset/css"
}

もちろん、Scssファイルを移動してもコンパイルされる場所は変わりません。
私はよくCSSと同じassetフォルダ内にscssフォルダをつくって、その中にScssファイルを使っています。

▼こんな感じ

今回はこの設定でSassのコーディングを進めていきます。

"liveSassCompile.settings.formats": [
	// style.css
	{
		"format": "expanded",
		"extensionName": ".css",
		"savePath": "/asset/css/"
	},

	// style.min.css
	{
		"format": "compressed",
		"extensionName": ".min.css",
		"savePath": "/asset/css/"
	}
]

CSS設計とは？

CSS設計とは端的に言うと、CSSを記述するためのルール、CSSを管理しやすくするためのルールのことです。

そもそもなぜCSSを管理しやすくしないといけないのかというと、見た目は普通にサイトとして機能していても、いざメンテナンスしようとするとコードがぐちゃぐちゃで修正に時間がかかるというのを未然に防ぐためです。

より詳しいCSS設計の解説については、CSSの管理が雑になったときに見直すCSS設計入門という記事で紹介しています。

FLOCSSとは？

CSS設計についてなんとなくイメージがつかめたところで、FLOCSSについて触れます。

FLOCSSは、CSS設計の種類の1つで、サイバーエージェントのhirokiさんがまとめたCSS設計の方法です。
github

ざっくり解説すると、FLOCSSは

• サイトの基本となるスタイルを定義するFoundation
• サイト全体の共通部分となるものを定義するLayout
• サイト内の各パーツのビジュアルに関するものを定義するObject

の3つで構成されています。
さらにObjectは、

• サイト内で部分部分で使うパーツを定義するComponent
• Componentとかのカタマリで構成されるProject
• 一部分だけ微妙にスタイリングが必要になったときに使うUtility

の3つに構成されています。

フォルダの構成の具体例としては、以下のようになります。（今回もこんなイメージでコーディングを進めていきます。）

scss
├──style.scss
├── foundation
│ ├── _base.scss
│ └── _reset.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── _sidebar.scss
└── object
├── component
│ ├── _button.scss
│ ├── _grid.scss
│ ├── _media.scss
│ └── _title.scss
├── project
│ ├── _articles.scss
│ ├── _contact.scss
│ ├── _comments.scss
│ ├── _gallery.scss
│ ├── _gnavi.scss
│ ├── _hamburger.scss
│ ├── _profile.scss
│ └── _section.scss
└── utility
  ├── _align.scss
  ├── _clearfix.scss
  ├── _margin.scss
  └── _typography.scss

より詳しいFLOCSSについての解説はFLOCSSの知識と運用方法で紹介しています。

それでは、次の章からFigmaでサイトの構造を把握していきましょう。