学習ポイント

  • webデザイナーだが、プログラミング知識を少しずつ学びたいと考えている
  • もっとコーディング速度を高めたい
  • サイバーエージェントのフロントエンドエンジニアの仕事をのぞいてみたい
  • このエントリーをはてなブックマークに追加

HTML/CSSコーディングを取り巻くWeb開発環境は日々進化しています。Sass/LESS/StylusなどのCSSプリプロセッサと呼ばれるCSSをより便利に速く記述できるフレームワークが登場し、Webデザイナーにもプログラミング的な知識を求められるようになってきました。

この授業ではその中でもSassとその拡張フレームワークであるCompassを取り上げて解説します。Sass/Compassを使えば、面倒な記述、タイピングを少なくすることができ、コーディング速度を高めることができます。また、急なデザイン仕様の変更にも変数や継承と言ったSassの機能を使えば柔軟に対応することができます。

ただSassを使用するにあたって、いわゆる『黒い画面』、ターミナルを使って通常のCSSにコンパイル(変換)する作業を伴ったり、変数、ミックスイン、継承といったプログラミング的な概念も必要になってきます。

なにごとも新しいものを取り入れることは苦労を伴いますが、私自身、転職を機にWebデザイナーからWebデベロッパーに職種が変わりました。その時に戸惑いながらも自分なりのペースでSass/Compassを導入していった経験をこの授業を通して共有できれば幸いです。

【前半】授業
  • 自己紹介&アジェンダ
  • 02:24
  • なぜSassを使うのか?
  • 06:23
  • 質問:黒い画面を日常的に使っている人
  • 03:40
  • SassのDemo
  • 03:36
  • 好きなエディタって何ですか?
  • 03:09
  • PreprosのDemo
  • 04:20
  • Sass/Compassの機能
  • 15:33
  • まとめ
  • 04:37
【後半】質疑応答
  • Q:Sassって電子書籍は無いのですか?
  • 00:49
  • Q:Windows環境でSassを使うのは難しいですか?
  • 01:02
  • Q:Sassは何の略ですか?
  • 00:37
  • Q:これから学ぶのにSassにすべきか、LESSにすべきか迷っています。双方のメリット・でメリットってありますか?
  • 01:58
  • Q:CompassはSass関連以外の機能もあると聞いた事があるのですが、オススメの機能とかありますか?
  • 00:36
  • Q:社内にSassを使わないスタッフがいる場合は、どのように共同作業しているのでしょうか?
  • 02:28
  • Q:Sassを使う事によって不都合な事がありますか?
  • 01:01
  • Q:Sassをコンパイルして出来たCSSファイルはレポジトリに入れてしまうと、コンフリクトしてしまうかと思うのですが、その辺りはどうしていますか?
  • 01:41
  • パフォーマンスの向上が期待できるテクニックってどのようなものがありますか?
  • 00:57
  • Q:Sassを扱う時にオススメのSublime textのプラグインを教えて下さい
  • 00:55
  • Q:既存のCSSをSassで書き直そうと考えた場合、頑張って書き直すしか無いのでしょうか?
  • 01:53
  • 課題発表