box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる

CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。

ちなみに下図のようなドット絵がつくれる。

マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。

デザイナーにもオススメ！シンプルですぐできるSass（SCSS）開発環境構築

ファミコン風CSSフレームワーク（NES.css）を開発するために、Sassの開発環境を整えたので共有したい。

---

ウェブページをスタイリングするためにはCSSを使うのだが、崩壊しやすい性質を持っている。詳細度による優先付け、スタイルの上書きなど要因はさまざま。そんな脆いCSSをちょっとでもメンテしやすくするために「Sass」というCSSを拡張したメタ言語が使われる。簡単に階層構造を作れたり、ループや関数などプログラムっぽいものが書けたりと、大きなウェブページをつくるなら必須だ。

しかし、Sassを使う上で避けては通れないものがある。
SassからCSSに変換する「コンパイル」だ。

フロントエンドエンジニアならNode.jsやwebpackを使ってできてしまうだろうが、デザイナーが手を出したら「Node.jsこわい」「webpackこわい」となりかねない。以降、コマンドラインから扱う便利ツールに拒否反応を示されてしまってはもったいない。

そこでシンプルで設定ファイルが少なく、かつある程度自動でなんでもやってくれるSassの開発環境をステップバイステップで構築していく。

この記事を書くにあたり使ったツールは以下のとおり。

• Node.js環境
• npm@5.2.0
• node.js@8.11.4
• SassをコンパイルしてCSSを出力する
• node-sass@4.9.3
• rimraf@2.6.2
• ベンダープレフィックスを自動的に付加する
• postcss-cli@6.0.0
• autoprefixer@9.1.5
• コーディングスタイルを統一する
• stylelint@9.5.0
• stylelint-config-recess-order@2.0.0
• stylelint-config-standard@18.2.0
• stylelint-scss@3.3.1
• 自動フォーマットする
• prettier-stylelint@0.4.2
• clean-css-cli@4.2.1
• コミット時にコーディングスタイルをチェックする
• husky@1.0.0
• lint-staged@7.3.0
• エディタで保存時に自動フォーマットする
• VSCode@1.27.2
• prettier-vscode@1.6.1