sass教科書

【書評】Web制作者のためのSassの教科書 改定2版

はじめに

今までIT業界にもプログラミングにも縁がなかった私ですが、半年間勉強してフロントエンドエンジニアになりました。まだ3週間のひよっこです。

業務では主にHTML、Sass、Vue.jsを触っています。

Sassを勉強しないと先輩の書いたコードが読めない問題(むしろCSS勉強しろ状態)だったので早速この本を買いました。

わたしのレベル感

・CSS初心者。毎回ググって書いてる。

・自己学習でVue CLI(Vue.jsの開発の下地を作ってくれ、プリプロセッサなど細かい設定なしで使えるシステム)するときにSassを選択してネストの記述をするくらい・・。

・業務でSassを使うようになり最近「&」とか「::after」の記述をしてるけど、それ以上のことはなにもわからない…

第1章 Sassのキホン 第2章 Sassの利用環境

Sassがどういったものなのかを知らない人向けに、Sassを導入するメリットが書いてあります。Sassがどんなものかわからなくて、勉強するか迷ってる人はここだけ読んでも良いかも。

Sassを使うには、Node.jsの環境を整えてnpm(yarn) installしてコンパイルの設定をしなくては使えません。本にはターミナル操作まで丁寧に書かれていますが、初心者がやるにはハードルが高いなという印象。

Rubyでインストールする記事もネットにはありますが、Ruby Sassは廃止されてるのでNode.js環境でnpmまたはyarnでインストールするよう気をつけてください。詳しくは→Ruby Sass is Deprecated

第3章 Sassの基本機能

変数やスコープ、演算、ファイルのインポートなど、JavaScriptや他言語を学習したことがある人なら流し読みできる内容です。Sassでもこんなことできるんだなー。でも実際の業務ではどう運用するんだろう。と思いながら読んでました。

実用的に感じたのは、「&」(アンパサンド)は、BEMで命名している場合かなり記述がラクになるし、読みやすくなる!

第4章 高度な機能を覚えてSassを使いこなそう

この章が一番深く読みました。@extendや、@mixinなどSassのまとめ記事でよく見るけど自分的に知識があやふやだった部分。

サンプルが詳しく書かれていてありがたい。制御構文や条件分岐など高度な処理はまだかけなそうだけど、もしコードを見たら意味がわかるかも・・レベル。functionも使えるなんて、CSSでそんなことができるのかという驚き。(いままで自分はださいCSSを書いてたんだなと読めば読むほど感じる笑)

第5章 現場で使えるSassテクニック

CSSの役割ごとにファイルを管理する方法や、変数の一元管理テクニックなど、活用してる現場では当たり前だけど、Sass経験者がいない場合は知見になりそう。

@forを使って余白調整のクラスを使ったり、list-style-type: noneの設定をしたり、スマホ対応のmixinを作ったりなど、プロジェクト全体で統一するスタイルのSassテクニックが書かれている。(わたしはありがたいことに先輩がこのあたりの設定をしてくれているので、感謝の気持ちを感じながらよみました笑)

さいごに

第6章ではBulma、Materializeなどのフレームワークや、拡張ツールの紹介。第7章ではSassのリファレンスが書いてあります。どちらもデスクに置いておいて「こんな機能ないっけなー」と見るのに良さそう。

本を読んですぐにSassが書けるように・・はならないけど、Sassの機能を十分に書いてくれてある良書だと思いました!

やっぱり自分の力にするには、Sassのコードを読んで自分で書いていくしかないですね・・。頑張ろう〜〜\( •̀ω•́ )/


この記事が参加している募集

推薦図書

買ってよかったもの

スキ頂けると嬉しいです〜