HTML/CSSTwitterFacebookはてブPocketファミコン風CSSフレームワーク(NES.css)を開発するために、Sassの開発環境を整えたので共有したい。ウェブページをスタイリングするためにはCSSを使うのだが、崩壊しやすい性質を持っている。詳細度による優先付け、スタイルの上書きなど要因はさまざま。そんな脆いCSSをちょっとでもメンテしやすくするために「Sass」というCSSを拡張したメタ言語が使われる。簡単に階層構造を作れたり、ループや関数などプログラムっぽいものが書けたりと、大きなウェブページをつくるなら必須だ。Sassを使う上で避けては通れないものがある。SassからCSSに変換する「コンパイル」だ。フロントエンドエンジニアならNode.jsやwebpackを使ってできてしまうだろうが、デザイナーが手を出したら「Node.jsこわい」「webpackこわい」となりかねない。以降、コマンドラインから扱う便利ツールに拒否反応を示されてしまってはもったいない。そこでシンプルで設定ファイルが少なく、かつある程度自動でなんでもやってくれるSassの開発環境をステップバイステップで構築していく。この記事を書くにあたり使ったツールは以下のとおり。Node.js環境npm@5.2.0node.js@8.11.4SassをコンパイルしてCSSを出力するnode-sass@4.9.3rimraf@2.6.2ベンダープレフィックスを自動的に付加するpostcss-cli@6.0.0autoprefixer@9.1.5コーディングスタイルを統一するstylelint@9.5.0stylelint-config-recess-order@2.0.0stylelint-config-standard@18.2.0stylelint-scss@3.3.1自動フォーマットするprettier-stylelint@0.4.2clean-css-cli@4.2.1コミット時にコーディングスタイルをチェックするhusky@1.0.0lint-staged@7.3.0エディタで保存時に自動フォーマットするVSCode@1.27.2prettier-vscode@1.6.1TL;DRNode.js環境を用意し、以下の内容をpackage.jsonというファイル名で作成する。commitをするだけ。2019/08/05ライブラリのバージョンアップにより一部動かなくなった箇所を修正した。lint-stagedがnode@8.12以上のバージョンを要求するようになったので合わせてアップデートしてほしい。}}Node.js環境を用意する先にあげたツールはすべてNode.js上で動作するものなので、まずNode.jsの環境を用意する。多くの場合は、バージョン管理ツール(nvmやnodebrewなど)を使うのだが、複雑になってしまうので簡単な方法を紹介する。nodejs.orgからLTS版をダウンロードし、インストールする。-vv8.11.4SassをコンパイルするSassには2種類の構文方式がある。)scss記法CSSとほぼ同じ個人的に移植が簡単なscss記法のほうが好みなので、以降scss記法を使う。$base-color;}次に、先ほど作成したstyle.scssをコンパイルするための設定を行う。Sassのコンパイルに必要なnode-sassをインストールする。node-sass次にコンパイルするためのスクリプトを定義する。{script-name}で実行することができる。略}上記は、scss/style.scssというファイルをコンパイルし、css/style.cssという名前で出力するという設定。trueを指定してデバッグしやすいようにソースマップも出力する。実行してみると、cssディレクトリ内にstyle.cssというファイルが作られる。-rf」コマンド(指定ディレクトリの全削除)を実行できるツールも導入しておく。ramrafpackage.jsonに手を加え、出力先ディレクトリを削除してからCSSファイルを出力させる。buildコマンド打つのは面倒だし、リアルタイムにコンパイルしてブラウザで確認したいときがある。そこで、ファイル変更を監視して自動コンパイルしてくれるwatchスクリプトを用意する。watchこのスクリプトを実行しておけば、ファイルを保存したときにSass→CSSに自動でコンパイルしてくれる。-o-など)を必要とする場合がある。これをいちいち調べて手動で付加するのは面倒だ。そんなときには、PostCSSとそのプラグインのAutoprefixerを使う。対象にするブラウザはBrowserslistで指定する。当記事ではシェアが1%以上のブラウザを対象にする。ベンダープレフィックスの付加をできるようにする。buildcss/style.cssを読み込んで、ベンダープレフィックスを付加して、css/style.cssに出力(上書き)するというスクリプトだ。1%"と指定するだけで、シェア1%以上あるブラウザを対象にしてくれる。versions"といった具合に指定できる。詳細についてはbrowserslistのリポジトリを確認ください。コーディングスタイルを統一する10人いれば10通りのコーディングスタイルがあるように、チーム開発になるとコードがカオスになりがちだ。コーディング規約を定めて「運用でカバー」は大抵うまくいかない。コード内に秩序をもたらすには、ルールを「強制」させることである。そこでstylelintを使ってコーディングスタイルを統一、もとい強制させる。stylelint-config-recess-order次にpackage.jsonの修正と、Stylelintの設定を行う。}}stylelintのpluginsにはSCSS用のプラグインを、extendsには標準ルールとプロパティ順序のルールを追加する。このままではSCSSの@mixinや@functionを使ったときに「CSSにない構文です」とエラーになってしまう。そこでrules内でデフォルトのat-rule-no-unknownを無効化し、scss用のscss/at-rule-no-unknowsを有効にする。ベンダープレフィックス付加が行われる。build自動フォーマットするstylelintに--fixフラグを付けて実行することで、ルールに反する記述を自動的にフォーマットしてくれる。それだけでは、コーディングスタイルを強制するにはちと甘い。そこで、より強制力を強化するためにPrettierというコードフォーマッターを使う。このツールによりstylelintでは対応しきれなかった部分まで整形させる。clean-cssというツールを使い、不要なコメントの削除やMinify(ファイル圧縮)をする。clean-css-cli次にpackage.jsonの修正と、stylelintの設定を変更する。ファイル圧縮がされる。style.css.mapコミット時にコーディングスタイルをチェックするいくらスクリプトを用意しても、実行してくれなかったら意味がない。秩序の破壊は絶許案件なので、コミット直前に最終防衛ラインを張る。gitのpre-commitフックを使ってコミット直前にコーディングスタイルをチェックし、もしチェックがエラーになったらコミットはキャンセルする方法だ。そのために、huskyとlint-stagedを使う。lint-staged次にpackage.jsonに手を加え、コミット前にstylelintでチェックさせる。略}これで、pre-commit時にlint-stagedを実行、scssディレクトリ内の全scssファイルを対象に、stylelintによるチェックと自動フォーマットを行い、エラーがなければコミットできるようになった。当記事に書かれていることをやっていくと、最終的に以下のようなpackage.jsonができあがる。