ブログのデザイン変更が5倍捗る!? 「Web制作者のためのSassの教科書 第2版」が良著だった

ブログのデザイン変更が5倍捗る!? 「Web制作者のためのSassの教科書 第2版」が良著だった

38

こんにちは、男子ハックのサイト制作を担当しているハンサムクロジです。

2017年9月15日に、CSSをより便利に使える“Sass”について基礎から学べる技術書「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」が発売されました。

インプレスよりご恵贈いただいたので、さっそく拝読しました!

Sassって何?どう便利なの?

Sass本の表紙

「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」は、2013年9月13日に発売された同名書の改訂版。

ブロガーやWebに関わる方であれば一度は聞いたことがあるであろうCSSを、さらに便利にする“Sass”について基本から実践テクニックまで網羅的に解説しています。

第1章「Sassのキホン」は、そもそもSassとはどういうもので何ができるのか、導入のメリットや導入にあたっての不安点&疑問の解消などといった基本的なところから始まります。

Sassとは?

やはり、使い慣れたCSSから切り替える労力に見合うメリットがあるのかというのが一番気になるポイントですよね。

ブロガーは記事を書くためにブログをやっているのであって、スタイルシートの調整などにこだわりすぎるあまり本業がおろそかになっては本末転倒です。

Sassを勉強するのも面倒だし、覚えたとしてもデザインにかける時間が増えるだけで本質的な価値につながらないのでは?と、導入を躊躇する気持ちもよく分かります。私もそうでした……。

しかし、実際は真逆。デザインにもこだわりつつ記事を書くことに集中したいブロガーこそSassを導入すべきなのです!

Sassの基本機能

ちなみに私自身はSassを活用することで以下のような“CSSあるある”から開放されました。

  1. スタイルを上書きしすぎて全容がつかめない
  2. コード量が増えすぎて自分で書いたのに読みづらい
  3. 長いベンダープリフィックスをいちいち追加するのが面倒

これらは、複数のSassファイルをまとめられる@import機能、HTMLと同じような入れ子でCSSを書けるネスト機能、定義したスタイルを別の場所で呼び出せる@mixin機能のほか、本書で紹介されているテクニックを利用することで一気に解消されます。

ひとつひとつの問題は小さく見えるかもしれませんが、塵も積もれば山となるです。

全くデザインに触れるつもりが無い場合は別ですが、そうでなければSassによってブログの執筆にかけられる時間を増やせるはずです!

読みながら手を動かして環境を整えよう!

メリットに共感できたなら、Sassを利用するための環境構築を進めましょう。

第2章「Sassの利用環境を整えよう」では、実際に手を動かしながらSassを使うための環境を作っていくことになります。

一見むずかしそうですが、本文中に出てくる専門的な用語を欄外で解説してくれたり、コマンドプロンプト(Macではターミナル)を“黒い画面”と表現するなど、とにかく初心者に易しい作りになっていました。

ワードのヒント

ここでは、できるだけ“黒い画面”を使わずにSassを利用する方法も解説されています。アプリを活用すれば、手軽に使い始められそうですよね!

黒い画面を使わない

実践テクニックでさらに便利に使いこなす

Sassの導入が完了したら、ここから一気に楽しくなります。第3章「これだけはマスターしたいSassの基本機能」、第4章「高度な機能を覚えてSassを使いこなそう」で細かい機能を学びつつ、第5章「現場で使える実践Sassテクニック」のアイデアを取り入れることで、自分のレベルがグッと上がるのを実感できるはずです。

Sass運用のテクニック

私もつい半年前までSassを使ったことがなかった初心者なので、本書にて「こんな方法があったのか!」と感動するテクニックをいくつも見つけることができました。

一度読んで終わりではなく、自分の制作物やブログの実装に合わせてアイデアを取り入れるために、長く手元に置いておきたいなと思いました!

Sassをブログ運営に活用してみよう

私も今では普通に使っているSassですが、学習コストや“黒い画面”への苦手意識から敬遠し続けていました。

しかし、実際の制作現場ではデファクトスタンダードとなっているうえ、Sassを基礎としてさらに新しい知見が必要とされるのが当たり前となっています。

「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」は、そういった先端の技術に触れるきかっけとなる良書です。

特にWordPressなどを利用してブログを運営されている方なら、新しい技術には多少なりとも興味はあるはず……!ぜひチェックしてみてください!!