Sass初心者にもオススメ!「Web制作者のためのSassの教科書」は超参考になりました!

SassというCSSのメタ言語を勉強中です。そして、勉強のお供に「Web制作者のためのSassの教科書」をKindle版で購入したのですが、初学者にフィットした内容だったのでご紹介します。

Sassの魅力

コード量が減らせる

Sass text 1

SassというのはCSSを効率的に書くための言語で、なにが良いかって言うと、コード量が減らせること。(だと僕は思っています。)

コード量が減らせるってことは、どこになにが書いてあるのか、見通しがよくなりますから、全体を理解するのがはやくなりますし、コード量が少ないので、修正箇所が少なくてすみます。

例えば、Sassには変数という機能があって、色Aという変数を作っておけば、色Aを100箇所につかっていても、修正するのは変数を宣言した1箇所ですむわけです。なんとなく伝わりますかね。

体系的に書ける

Sass text 2

あと、Sassを使うとCSSが体系的に書けます。Sassで書いたCSSを見るとなんかコードがしゅっと見えます。

例えば、サイトのデザインCSSでいじっているうちに、いつのまに同じセレクタを2箇所に書いてしまうことってありますよね。前書いていたのを忘れてるわけですね。そして、修正を重ねるうちに次第に読みにくくなり、しまいには意味のないコードができしまったりします。

でも、Sassのネスト機能を使うと、セレクタの階層を意識するので、セレクタが迷子になったり、一人ぼっちになりにくいです。

ということで、全体のコードの量が減り、コードの見通しがよくなるので、開発速度がぐっと早くなります。CSSを書く万人におすすめしたいですね。

Sassは「Web制作者のためのSassの教科書」で勉強しよう

ということで、今回Sassの勉強に使用した本「Web制作者のためのSassの教科書」をご紹介。おそらく現時点で日本で唯一書籍化されているSass本です。

初心者にやさしい

Sass text 3

まず、「Web制作者のためのSassの教科書」は初学者にやさしい構成になっています。「Sassは知っているけどなんか(環境の準備が)面倒なのでやらない」という人が多いことをちゃんと想定して、そんな人のための導入のステップに多くのページを使っているのが素敵です。

例えば、Rubyのインストール方法(Windowsのみ)とか、黒い画面の扱い方とか嫌ですよね?これを丁寧に解説してくれます。あと、Sassと使うとなにが嬉しいのかポイントをちゃんと解説してあります。

現場で使えるTipsも盛りだくさん

Sass text 4

  • 複数人で制作する場合は、各自のSassファイルを用意する (P.181)
  • @eachを使ってベンダープレフィックスを自動で付与する (P.196)
  • calcを使って全体の横幅からボーダーの横幅を簡単に計算する (P.218)
  • Retinaディスプレイなど、高解像度端末の対応を楽にする (P.239)

などなど、初学者に限らず、ちゃんと現場で使えるTipsが盛りだくさんです。ちなみに、僕の場合「nullで簡単に条件分岐してレイアウトする (P.216)」何かを使って、デザインパターンをいくつも作ったりしてます。

というわけで、「Web制作者のためのSassの教科書」はSassの導入段階でつまづいた人や網羅して勉強したい人におすすめします。結局言語って使ってみないと

サポートサイトにサンプルコードあります

Sass text 5

サポートサイト(公式サイト)を見ていたらサンプルコードがありましたので、グッと学習効率が上がりそうですね。

ということで、男子ハックのプチリニューアルがんばります。(誰か僕のかわりにCSS書いてくれないかな…)

関連する記事
関連するカテゴリ
Facebook
LINE@ "友だち追加"

スマホでLINEを起動 > その他 > 友だち追加 > QRコード

メール配信登録
ランキング