WNT-Technology-20140204
Technology

2時間でSassを習得!Sass初心者向け講習スライド大公開!

thumbnail_b_markup_140204-3

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を触る機会の少ないディレクターでも分かるように組み立てられていますので、ぜひ活用してみてください。

img_markup_140204_02

実は今回ご紹介しているスライドは、弊社内で行った講習会のために制作したものです。
参加したメンバー全員が、この実践型の講習を通してSassの理解を深めることができました。

その結果…

  • ソースを見るだけでSassが使われているかが判断できるようになった。
  • 簡単なスタイルの修正はSassファイルから修正できるようになった。
  • 受託案件や協力会社とのやりとりにおいて、Sassのファイルをどう扱うか判断できるようになった。

という感じでSassは怖くない!という意識を持てるようになりました!


Sass講習会開催のすすめ

今回ご紹介しましたスライドとサンプルファイルはご自由にお使い頂いて結構ですので、是非皆さんも社内/チーム内でSass講習会を開催してみてはいかがでしょうか?
また、このスライド内でわかりにくかった所やご意見などありましたらお手柔らかにコメント頂ければ幸いです。

参考書籍

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

スライドの中でも紹介していますが、本講習で使っているサンプルソースや内容の説明についてはこちらの書籍をベースに作成しています。
講習内でSassに興味を持ち「もっと詳しく勉強したい!」という方にはオススメの一冊です。

thumbnail_b_markup_140204-3

記事が気に入ったらシェアしよう

この記事を書いたメンバー

成果につながるWeb制作を

成果につながるWeb制作を
ビーワークスのミッションは「デザインで世の中を動かすこと」。
出版物、販促ツール、WEBサイト、ゲームアプリなど、多用な領域でクライアントのビジネス拡大に貢献するデザインを提供する制作会社です。

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 魚座
  • 牡羊座
  • 牡牛座