Sass実践編+Compass入門

 Sass実践編+Compass入門

DIST.2「Sass Again」発表資料

Cb42953bfedcd81daf5b1330d98712c3?s=128

448jp | OKI Yoshiya

April 08, 2014
Tweet

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ファイルは1つだけにまとめられる パーシャル

  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 !