Sass実践編＋Compass入門

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Compass入門 Chapter.1 | Hello, Compass

Slide 5

Slide 5 text

Compassとは何か What's Compass ?

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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でエラーが出る場合 – 解消手順

Slide 14

Slide 14 text

デモ Demo (my-first-compass)

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

デモ Demo (css-sprite)

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Sass実践編 Chapter.2 | Practice for Sass

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Thank you !