今回のエントリでは、Sass を使用するとどれくらいコードが分かりやすくなるのかを実際のソースで比較してみることにしましょう。まずは当サイトで使用しているソーシャルネットワークサービスのアイコンを見てください。サイト右上にあるアイコンですね。このように右側から順にアイコンを配置するという機能を作ります。画像は使用しませんが、 a タグをブロック化してクリックできるようにしましょう。ではまず CSS から作成します。
前回、「Sassを使って2カラムのサイトを簡単に作ろう」で作成したソースをForkし、3カラムのサイトを作ります。では実際に作成したものを見てみましょう。前回から新たに追加した処理部分はハイライトしています。
いきなりですが、Sassのソースと実行結果を見てみましょう。
無謀なエントリかと思われるかもしれませんが、平均的な速度の方だと2倍以上にタイピング速度が上がる方法があります。まあ練習しか無いわけですが、その練習方法やコツに鍵があったりします。
コツって言うと楽にタイピング速度が上がるイメージが出てしまうかもしれませんが、現実的なことをいうといきなり速度が向上するなんてことはないです。やはりそれなりに習得に時間はかかります。では、速度を上げるレベル別に見てみましょう。
結構前から話題になっているSassを導入してみましたので、その手順をまとめてみました。分かりやすいサイトは複数あるので、私自身の備忘録として 残したいと思います。
Categories
Hello world!
取りあえずですが、デザインはできましたので公開します。
内容や修正は順次やっていこうと思います。