DIST.2「Sass Again」発表資料

1. Sass実践編＋Compass入門
沖 良矢（世路庵）
2014.4.4 (Fri)
DIST.2「Sass Again」

2. 自己紹介
沖 良矢 / OKI Yoshiya
@448jp
インタラクションデザイナー
DAIHATSU The 43rd TMS (2013) Web Designing (2009～)UNIQLO HAPPY GIFT (2013)

3. お品書き
Compass入門
 Compassとは何か
 インストール
 プロジェクトの作成とコンパイル
 CSSスプライトの生成
Sass実践編
 パーシャル
 ソースマップを使ったデバッグ
 ミックスイン/継承/関数のコツ

4. Compass入門
Chapter.1 | Hello, Compass

5. Compassとは何か
What's Compass ?

6. Compass is an open-source CSS
Authoring Framework.
http://compass-style.org/

7. Compassは、オープンソースの
CSSオーサリングフレームワー
クです。
http://compass-style.org/

8. Sassを使ったCSSフレームワーク
オープンソース
MITライセンス
Compass【コンパス】

9. Sassのミックスインとユーティリティ
アプリケーション環境との統合用システム
拡張機能のプラットフォーム
Compassを構成する3つの要素

10. コマンドプロンプト（Windows）またはターミナル
（Mac）で以下のコマンドを実行
「gem install compass」
要Ruby
インストール

11. プロジェクトの作成（作成したい場所で実行）
「compass create」
コンパイル（Compassプロジェクトの場所で実行）
「compass compile」
プロジェクトの作成とコンパイル

12. Windowsで、インストール時やコンパイル時に
「permission denied」などのエラーが出る場合がある
SassとCompassのバージョンの組み合わせや、正常に
アンインストールができていないことが原因
参考：
http://stackoverflow.com/questions/22597223/errnoeacc
ess-permission-denied-running-compass-watch
Windowsでエラーが出る場合

13. 1. 以下のコマンドでアンインストール
「gem uninstall compass gem uninstall sass」
2. 以下のフォルダ内にあるファイルをすべて手動で削除
「C:¥Users¥ユーザー名¥.gem」
3. 以下のコマンドでバージョンを指定してインストール
「gem install sass -v 3.2.10」
「gem install compass –v 0.12.2」
Windowsでエラーが出る場合 – 解消手順

14. デモ
Demo (my-first-compass)

15. Compassに含まれるコア機能
CSS3
Helpers
Layout
Reset
Typography
Utilities

16. CSSスプライトの作成に必要な機能のimport
「@import "compass/utilities/sprites";」
スプライト化するフォルダを指定
「@import "フォルダ名/*.png"」
フォルダ内のすべての画像をスプライト化
「@include all-フォルダ名-sprites」
CSSスプライトの作成

17. 任意のクラスでbackground-positionを指定
「@include フォルダ名-sprite(画像ファイル名);」
すべての画像で幅と高さを取得
「$フォルダ名-sprite-dimensions: true; 」
CSSスプライトの作成

18. デモ
Demo (css-sprite)

19. まとめ
Compassは、Sassを使ったCSSフレームワーク
CSSスプライトの自動生成は超絶
ちょっとしたミックスインを使いたいだけなら
Bourbonもお勧め

20. Sass実践編
Chapter.2 | Practice for Sass

21. CSSファイルを生成したくないSassファイルは、ファイ
ル名の頭に_（アンダースコア）を入れる
この機能を「パーシャル」と呼ぶ
変数などを機能別にSassファイルで分けて、出力する
CSSファイルは１つだけにまとめられる
パーシャル

22. 以下のオプションを付けてコンパイルすることでソー
スマップファイルを出力できる
「sass --sourcemap screen.scss:screen.css」
ソースマップはSass 3.3.0からの機能
Google Chromeではデベロッパーツールから該当の要
素についてSassファイルベースでデバッグできる
ソースマップによるデバッグ

23. ミックスイン / 継承 / 関数のコツ
引数を使う 値は複数
@extend @function
@mixin
YESYES
NO NO

24. Thank you !