Sass実践編＋Compass入門

Transcript

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

    YES YES NO NO

24. Thank you !