この記事の概要
再現する対象
以下の7つの特徴を再現できるように挑みます。
- Variables
- Nesting
- Partials
- Modules
- Mixins
- Extend/Inheritance
- Operators
こちらの特徴は、公式ドキュメントのガイドページを参照しています。
準備
まずはPostCSSのインストールからです。
npm i -D postcss postcss-cli
ひとまず空のpostcss.config.jsを作成します。
module.exports = {}
package.jsonに変換用のコマンドを追加します（コマンド名や書き出したCSSのファイル名は何でもOKです）。
{
//省略
"scripts": {
"css:watch": "postcss 変換前.css -o dist.css -w"
},
}
あとはCSSを監視します。
npm run css:watch
Variables
Sassの変数とは違いますが、今やCSS純正のCustom Propertiesが使えるのでそちらを使います。
そのため、特別な設定は不要です。
Nesting
postcss-nestedを使います。
npm i -D postcss-nested
postcss.config.jsに設定を追加します。
module.exports = {
+ plugins: [
+ require('postcss-nested')
+ ],
}
あとは通常のSassと同じくネストして書けばOKです。
以下のコードもそうですが、例として示すコードはリポジトリに載っているコード（またはそれを多少いじったもの）です。
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
.title {
font-size: var(--font);
@at-root html {
--font: 16px
}
}
.phone_title {
width: 500px;
}
@media (max-width: 500px) {
.phone_title {
width: auto;
}
}
body.is_dark .phone_title {
color: white;
}
.phone img {
display: block;
}
.title {
font-size: var(--font);
}
html {
--font: 16px
}
Partials, Modules
分割するのとそれを読み込むのはセットなので、まとめて紹介します。
postcss-importを使います。
npm i -D postcss-import
postcss.config.jsに設定を追加します。
module.exports = {
plugins: [
require('postcss-nested'),
+ require('postcss-import')
],
}
あとはimportするだけです。
Sassだとimportが廃止になってuseに変わりましたが、こちらではimportのままです。
/* base.cssというファイル名 */
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
@import "base.css";
.inverse {
background-color: #333;
color: white;
}
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
.inverse {
background-color: #333;
color: white;
}
Mixins
postcss-mixinsを使います。
npm i -D postcss-mixins
postcss.config.jsに設定を追加します。
module.exports = {
plugins: [
require('postcss-nested'),
require('postcss-import'),
+ require('postcss-mixins')
],
}
あとはmixinを定義して使うのですが、Sassとは微妙に書き方が違います。
mixinの定義時は@extendではなく@define-mixinで、使うときは@includeではなく@mixinです。
入れ替わっている感じが若干ややこしいですが、致し方ありません。
@define-mixin icon $network, $color: blue {
.icon.is-$(network) {
color: $color;
@mixin-content;
}
.icon.is-$(network):hover {
color: white;
background: $color;
}
}
@mixin icon twitter {
background: url(twt.png);
}
@mixin icon youtube, red {
background: url(youtube.png);
}
.icon.is-twitter {
color: blue;
background: url(twt.png);
}
.icon.is-twitter:hover {
color: white;
background: blue;
}
.icon.is-youtube {
color: red;
background: url(youtube.png);
}
.icon.is-youtube:hover {
color: white;
background: red;
}
Extend/Inheritance
postcss-extend-ruleを使います。
npm i -D postcss-extend-rule
postcss.config.jsに設定を追加します。
module.exports = {
plugins: [
require('postcss-nested'),
require('postcss-import'),
require('postcss-mixins'),
+ require('postcss-extend-rule'),
],
}
あとは通常のSassと同じように書けばOKです。
%thick-border {
border: thick dotted red;
}
.serious-modal {
font-style: normal;
font-weight: bold;
@media (max-width: 240px) {
@extend .modal:hover;
}
}
.modal {
@extend %thick-border;
color: red;
}
.modal:hover:not(:focus) {
outline: none;
}
.serious-modal {
font-style: normal;
font-weight: bold;
}
@media (max-width: 240px) {
.serious-modal:not(:focus) {
outline: none;
}
}
.modal {
border: thick dotted red;
color: red;
}
.modal:hover:not(:focus) {
outline: none;
}
Operators
純正のcalc()が使えるので、特別な設定は不要です。
なんならSassの除算はmath.div(600px, 960px)といった書式のため、書きづらくなるまであります。
最後に
「最近のCSSは進化してるよなあ」とボンヤリと思っていたのですが、こうして調べてみるとより明確に感じました。
あえてSassを使わずともできることが増えているので、無理に導入する必要もないかもしれません。
今回の記事ではNestingにもPostCSSを使いましたがCSS Nesting Moduleの策定も進んでいるようですし、この記事がいつまで役に立つやら……という気持ちもあります。
しばらくの間、ちょっとした資料としてでも役立てば幸いです。
最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！
Devトークでのお話してくださる方も募集中です！