chevron_left

WebデザイナーのためのSass/Compass入門

PREMIUM
第1回

WebデザイナーのためのSass/Compass入門

2013年9月27日 60min

スライド資料

会員登録して、全てのスライドを見よう

1 / 116

授業の概要

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

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

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

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

チャプター

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