実践
ECSSから学ぶ、PostCSSを利用した環境構築
7

前回紹介した色管理のアプローチを踏まえ、色管理を行う仕組みをビルドへ組み込んでみます。併せて、色についての情報をまとめたガイドを作成し、色設計を行っていくための方法を考えます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

CSS内で似た色の指定をしてしまうのを防ぐために、変数に色を格納して管理する設計を考えます。今回は2つのアプローチを紹介し、それらを元にCSSでの色の管理方法について理解を深めます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

CSS内で登場する色がバラバラになると、デザインの整合性を欠いてしまいます。そこで、CSS Colorguardというツールを使い、色を変数で管理する仕組みをビルドに追加する方法を解説します。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

今回は、ECSSにおけるMixinの考え方と、postcss-mixinsの使い方を解説しつつ、ECSSのビルド環境を作っていきます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

今回は、ECSSにおけるディレクトリ構成の考え方と、@import文でglobを利用可能にするpostcss-easy-importを解説しつつ、ECSSのビルド環境を作っていきます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

今回は、前回紹介したpostcss-nestedで可能になる括弧の入れ子と、postcss-simple-varsで可能になる変数の機能を、ECSSではどのように考えているのかを解説します。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

名前空間によりモジュールを分類することで、コードの複雑化を防ぐアプローチを取るECSSの、PostCSSを用いたビルド環境の構築例を紹介します。今回は、PostCSSの基本について触れます。

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア