※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。
CSSを効率的に書ける言語として昨今話題のSass。
これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。
普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。
スライドに沿って実践すればSassの基本を短時間でマスターできます！
この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。
実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。
https://webnaut.jp/download/markup_140204/sass.zip（3.5MB）
Sassの良さを活かすためには、チーム全員がSassを理解することが大切
Sassの導入にあたっては、CSSだけを使っていた時代に比べてできる事が飛躍的に増える反面以下のような懸念点があります。
- ターミナルを使うか別途アプリケーションを覚える必要がある等コンパイルを行うハードルが高く、気軽に触れない。
- Sassから生成されたCSSを間違って直接修正してしまい、先祖帰りを起こしてしまう。
- ファイルが増える事で管理が煩雑になる。
- 記述ルールが統一されていないと、書いた人以外が理解できないソースになってしまう。
このような制作や運用時のトラブルを防ぐためには、まずはチーム全員でSassの基本を理解した上でワークフローやファイル管理のルール整備を行うことが重要です。
今回ご紹介するスライドは、今までSassを使った事のなかったデザイナーやコーダー、普段CSSを触る機会の少ないディレクターでも分かるように組み立てられていますので、ぜひ活用してみてください。
実は今回ご紹介しているスライドは、弊社内で行った講習会のために制作したものです。
参加したメンバー全員が、この実践型の講習を通してSassの理解を深めることができました。
その結果…
- ソースを見るだけでSassが使われているかが判断できるようになった。
- 簡単なスタイルの修正はSassファイルから修正できるようになった。
- 受託案件や協力会社とのやりとりにおいて、Sassのファイルをどう扱うか判断できるようになった。
という感じでSassは怖くない！という意識を持てるようになりました！
Sass講習会開催のすすめ
今回ご紹介しましたスライドとサンプルファイルはご自由にお使い頂いて結構ですので、是非皆さんも社内／チーム内でSass講習会を開催してみてはいかがでしょうか？
また、このスライド内でわかりにくかった所やご意見などありましたらお手柔らかにコメント頂ければ幸いです。
参考書籍
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
スライドの中でも紹介していますが、本講習で使っているサンプルソースや内容の説明についてはこちらの書籍をベースに作成しています。
講習内でSassに興味を持ち「もっと詳しく勉強したい！」という方にはオススメの一冊です。