【初心者向け】HTMLとCSSをマスターしたエンジニアが次にやるべきこと

Web開発において最近ホットなものと言えばCSSプリプロセッサです。HTMLとCSSをマスターしたデベロッパーの方は、CSSの構築をよりパワフルかつ構築しやすくしてくれるCSSプリプロセッサを勉強されてみてはいかがでしょうか？

中には「Sass、Scss、Less」という言葉をすでに聞いたことがある方がいらっしゃるかもしれませんが、これらがCSSプリプロセッサの代表的な存在です。実はこのほかにもたくさんのCSSプリプロセッサはあるのですが、個人的にはSassをオススメします。（もしGulpJS、 Gruntjs、NPM scriptsなどを触ったことがある方は、PostCSSがオススメです）

Sassを使うことで、より多様な機能やMixinを追加することができますし、なによりもCSSを書くスピードが格段に上がります。インターネット上にさまざまなリソース（素材）が用意されているのも魅力です。

ただし多くのSass初心者が勘違いすることなのですが、Sassはブラウザ上で動くものではありません。動かすためにはまずCSSにコンパイルする必要があります。これは面倒なように聞こえるかもしれませんが、開発ファイルを分離することができるという利点でもあります。

Sass関連ツール

先述の通り、Sassを動かすにはCssにコンパイルする必要がありますが、そのツールではコマンドライン*が使えるものがオススメです。

（※編集註：キーボード入力でコマンド[命令]を出せること。マウスへの持ち替えがないのでコーディングの速度がアップする。またユーザーインターフェイスがコマンドラインのものを「CLI」、ユーザーインターフェイスがボタンのクリック操作などのものを「GUI[グラフィックユーザーインターフェイス]」という）

下記はCssにコンパイルできるツールの一覧です。

• Koala(GUI, 無料) Windows, Linux & Mac
• Sass(CLI, 無料) Rubyベース Windows, Linux & Mac
• Prepros(GUI, 無料／有料) Windows, Linux & Mac
• Compass App(GUI, 無料) Windows, Linux & Mac
• Scout(GUI, 無料) Windows & Mac
• SassMeister(GUI, 無料) Browser*
• io(GUI, 無料) Browser*
• GulpJS Sass(CLI, 無料)  GulpJSと一緒に使う Windows, Linux or Mac
• GruntJS Sass(CLI, 無料) GruntJSと一緒に使う Windows, Linux or Mac
• Node-Sass(CLI, 無料) npm scriptsと一緒に使う Windows, Linux or Mac

CSSプリプロセッサを使った開発の始めかた

CSSプリプロセッサを使った開発はSassを使わない開発とそれほど変わりません。しかしCSSでできる優れた機能を使うことができるようになります。そのためにもまずは上のいずれかのツールをPCにインストールし、セットアップしてみてください。

（※本稿は「What is the next step after learning HTML & CSS? CSS Pre-processors」を参考にしています）