Sass実践編＋Compass入門

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

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

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

Compass入門 Chapter.1 | Hello, Compass

Compassとは何か What's Compass ?

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

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

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

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

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

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

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

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

デモ Demo (my-first-compass)

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

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

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

デモ Demo (css-sprite)

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

Sass実践編 Chapter.2 | Practice for Sass

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

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

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

Thank you !

Sass実践編＋Compass入門

Sass実践編＋Compass入門

448jp | OKI Yoshiya

More Decks by 448jp | OKI Yoshiya

Other Decks in Technology

Featured

Transcript