今日から使える！Sass/Compass ゆるめ勉強会

2013.11.17

自己紹介

‣ ノジマユウジ

‣ 株式会社フォーエンキー代表

● Android/iOSアプリ● Webアプリ/WordPress● Winデスクトップアプリ● Web制作全般● グラフィックデザイン● 印刷

‣ PythonとJavaScriptが大好き。Javaも好き、C#も面白い。要するに言語好き

‣ おしゃれも大好き☆リボンやお花が好き☆

‣ 参加コミュニティ● 日本Androidの会 神戸支部 ● HTML5-WEST.jp● WordBench 神戸

絶賛お仕事募集中

@yuka2py

書籍を執筆しました。JavaScript についても基礎から応用・発展まで詳しく書かれています。良かったら書店で手に取ってください。

http://www.amazon.co.jp/dp/4798129682

自己紹介

実体 良い子 ほぼ留守

最近のボクPython

2%Design

8%

Android/iOS42%

Windows20%

Web/WordPress28%

Web /Wo r d P r e s sW i n d o w sA n d r o i d / i O SD e s i g nP y t h o n

2013年10月31日株式会社フォーエンキー調べ

　　　最近のボク（ホント）

お嫁50%

Python1%

Design4%

Android/iOS21%

Windows10%

Web/WordPress14%Web /Wo r d P r e s s

W i n d o w sA n d r o i d / i O SD e s i g nP y t h o nお嫁

2013年10月31日株式会社フォーエンキー調べ 恐

愛

はじめに本セッションでは、Sass/Compassの概要とツールとの関連、またその基礎的な構文を紹介します。またデザイナーの方でも実践しやすいように「Prepros」というGUIツールの使用法も解説しています。

対象者・まだ Sass/Compass に触れたことの無い方で、・でもきっと良いものだろうと夢と希望を抱いている方・ターミナル/コンソールなど CUI が苦手な方・CSSの設計や構造化の手法に悩んでいる方

ご注意本セッションでは簡単の為に、Sass中の「Scss」記法を「Sass」として取り扱い、またほとんどの箇所でその点について特には言及しません。

この資料だけ読まれる方へ本資料はハンズオン前の解説のためのものですので、解説資料としては不足がありますが、ご容赦ください。

(*'-'*)

What’s Sass?

http://sass-lang.com/

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

most mature, stable,and powerfulなるほど。もっとも成熟して、安定して、パワフルな…

professional gradeCSS extension language in the world.プロフェッショナル級の CSS 拡張言語！

(･ω･`)ｳｰ...

What’s Compass?Compass is an open-source CSS Authoring Framework.

http://compass-style.org/

Open-source CSS Authoring Framework.

なるほど。こちらはオーサリングの為のフレームワークね。

(･ω･`)...

よくわかんない？

(･ω･`)ｴｯ...

よくわかんないの？

ｳ.. (･ω･`))-ω-`)) ｳﾝ...

じゃあ、難しいことは明日にしちゃおうか？

(･ω･)

(*^-^)うん!

「明日」って言葉が好き♪

という皆さんに、本日はお集りいただいたハズです！

違ってたら申し訳なく思います。 (･ω･`)(-ω-`)) ﾍﾟｺﾘでももうどうあがいても本日の内容はこんな感じです。

でも、

今日、PCがあって実践できる方は、たぶん Sass お持ち帰りできます。

出来なかったら、すまないと思いたいと思います。 (･ω･`)(-ω-`)) ﾍﾟｺﾘ

朗報

なぜなら、

Sassは､ワリと簡単だから！

僕の周りのデザイナーさんでは、やはり環境構築で躊躇される方が多い感じです。また、高度なことをしようとすると、少しずつ難しくなります。でもとっかかりは簡単です。そしてとっかかりだけでも、Sass は強力な武器になります。

(*ﾟдﾟ*)

で、そもそもなんですが…

CSSってメンドクサイ

.post { ... }

.post header { ... }

.post header > h1 { ... }

.post header .post-meta { ... }

.post header .author-meta { ... }

.post header .tags { ... }

.post header .categories { ... }

.post header a { ... }

.post header a:hover { ... }

.post.promotion { ... }

CSS

何回も同じの書かんとアカンし…

ヽ(,-｀Д-)ﾒﾝﾄﾞｰ

.positive-button { background: #2451F9; }　....post header h1 { color: #2451F9; }　...a.refer { content:”⇒”; color: #2451F9; }

CSS

色とかフォントサイズとか、あちこちに散らばって管理めんどー

o(>_<o)(o>_<)o

.clearfix { *zoom:1; }

.clearfix:after {

    content: "\0020";

    display: block;

    height: 0;

    clear: both;

    overflow: hidden;

    visibility: hidden;

}

<aside class=”promotion-box clearfix”>...</aside>

<article class=”post clearfix”>...</article>

<div class=”widget clearfix”>...</div>

CSS

どれだけアチコチに書かなアカンねん！

(oω｀o)

.box-A { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;}

な、なんなんね？！ これは…。

(･∀･|||)

もう…

(*>_<)

めんどくちゃい！ (*>_<)と、結構多くのズボラ屋さん Web 屋さんが思ってました。

( ° _ ° )

( ° _ ° )

そこで、とある偉い人は考えました。

…なんとかズルはできんのか？

( ° _ ° )

よっしゃ、つくったる。

(･∀･)

Sass 作ったった！

…こうしてSassが生まれましたハズ。ほぼ 100% ホントのハズ。

では…

Sass とか Compass って何？

QSassってなんすか？

(？_？)

ACSSメタ言語っす｡

Σ(･ω･*) ｴｯ...

ごめんごめん

ACSSをワリと楽に書けるヤツっす。

Qじゃぁ､Compassってなんすか？

(？_？)

Sassを楽に書けるヤツっす。A

Σ(･ω･*) ｴｯ...ｶﾌﾞｾﾀ?

いや。今度はマジです。

Sassでラクチンできます。

Sass

それでもまだ「メンドクサイ」という人が居たので、また別の偉い人が、もっとズルしようと作ったのが…

Sassでラクチンできます。

Sass

それでもまだ「メンドクサイ」という人が居たので、また別の偉い人が、もっとズルしようと作ったのが「Compass」です。

Compass

Sass

Compass でもっとラクチン。

Compass

Compass は、Sass をもっと便利にする別のツールです。ツールだけでなく、Sass の機能をフル活用したお便利グッズも含まれるため、フレームワークと言われています。

Sass と Compass の関係は？

SassとCompassは、JavaScriptとjQueryみたいな関係だと思ってください。jQueryを使って書いたプログラムは、あくまでもJavaScriptですよね。jQueryはJavaScriptの機能を使って、JavaScriptをより便利にします。Compassも同様に、Sassの機能を活用して、Sassをもっと便利にするツールです｡

なので、Compassを使って書かれたファイルもSassファイルです。

QSass は CSS ですか？

(？_？)

A違います。

だから、Sass のファイルは、ブラウザに直接は読み込めません。

Sass

Compass

CSS

Qじゃどうやって、Webで使うんですか？？

(？_？)

ACSSに変換します。

Sass

Compass変換 CSS

Sass ファイルから、Sass のツールで変換して、CSS ファイルを作ります。また、この変換のことを「コンパイル」と言います。

（コンパイル）

Qいちいち変換とか面倒っす！

(･∀･)

（コンパイル）

Aそんなに面倒でもないっすー。

コンパイル（変換）は、勝手にやってくれます。だれもそんなメンドクサイことはやりたくない。

Qだれが？

ASassさんとか､Compassさんとか､Preprosさんとかが…。

ﾝ? (･ω･*) ﾀｸｻﾝ ｲﾙﾉ?

CSS

Sass を CSS にコンパイル（変換）できる方は沢山います｡

Sass

Compass変換ツール

選べる

Sassにも変換ツールは付属していますし、Compassからも変換できますが、どちらもターミナル（黒い画面）との対決が必要です。でも、黒い画面を使わない別のツールも幾つか出てきて､最近では制作者がコンパイル環境を選べるようになりました｡

その中で今日は、Prepros というツールを使います｡

Sass

Prepros でもっと簡単に。

Compass

Prepros は、Sass ファイルを変換して CSS ファイルを生成する GUI ツールです。Macintosh/Windows の両方の環境で使えて、無料バージョンでも十分に高機能です。PRO 版は少しお金が要りますが、さらに便利な機能が使えるようになります。

Prepros CSSGUI

Preprosは、Sass以外にも色々変換できる。Sassの他にもCSSを生成する別のメタ言語があります。また、HTMLを生成するメタ言語や、JavaScriptを拡張した言語など、高度化するWeb制作を効率化するために、多くの言語やツールが開発されていて、Preprosはこれらの処理にも対応しています。

Prepros CSSSassLessStylusCoffeeLiveScript

JadeSlimHamlMarkdown

HTMLJavaScript

でも今日はSass

特に、フロントエンドエンジニアの皆さんには、JadeやSlimといった、HTML系のメタ言語は、一度使うと確実にハマると思います。Sass同様に保守性能が上がるといったこと以上に、制作時のミスの軽減や高速化が実現できます。極端ですが、個人的にはEmmet要らん！って思ったほどです。

整理すると…‣ Sassとは？

● CSSを楽に書ける、CSSに似た別の言語

● SassからCSSへの変換ツールを含む（黒画面）

‣ Compassとは？● Sass をもっと便利にする為に開発されたフレームワーク

● Sass の仕組みを活用した便利なアイテムがたくさん

● Sass の変換をより便利する為のコマンドが付属（黒画面）

‣ Sass か Compass かは、あまり気にしないでOK● 昨今は Compass を一緒に利用するケースが殆どだと思います。

● ということで基本 Sass & Compass！

‣ Prepros● Sass/Compass をCSSに変換できるツール

● Sass/Compass に限らず、モダンなWeb制作で使われるツールがセットになっている

● GUIアプリケーションなので、黒画面苦手な人もOK

うん。コンパイルが必要なのは分かった…｡（変換）

Qじゃ、Sass って実際どんなの？

(*’-’*)

ACSS+アルファな感じっす｡

（注）Sass/Scssの話がありますが、ここでは単純の為に割愛してScss構文=Sassで話をします。Sass/Scssの違いが分かってて、「乱暴ちゃう？」って思う人は、このセッションは卒業です！

(ε｀；)ｳｰﾝ…

とりあえず、見た方が早い。

.post { ... }

.post header { ... }

.post header > h1 { color:#ABCDEF; }

.post header .post-meta { ... }

.post header .tags { ... }

.post header a { color:#ABCDEF; }

.post header a:hover { color:#89ABCD; }

.post.promotion { ... }

こんな CSS を、Sass で書くと…

CSS

.post { ... }

.post header { ... }

.post header > h1 { color:#ABCDEF; }

.post header .post-meta { ... }

.post header .tags { ... }

.post header a { color:#ABCDEF; }

.post header a:hover { color:#89ABCD; }

.post.promotion { ... }

Sass

こうなるぜっ！ ヒャッハー！

Σ(･ω･*) ｴｯ...

Σ(･ω･*) 同ｼﾞﾔﾝ...

せや！ 同じやで！

でも、それが素晴らしい。

Sass の構文は、CSS に新しい構文を追加したもの。

つまり、全ての CSS ファイルは Sass ファイルとして妥当なので、Sass のコンパイラでそのままコンパイルすることが出来ます。先の例で、Sass と CSS の内容が全く同じだったのは、そのためです。

※ほんとはScssファイルの事ですが、ここでは割愛します。 (*’-’*)

SassCSS

つまり CSS は、そのままでも Sass と言えます。

でも、Sass は CSS ではありませんのよ！Sass の記法を使ったファイルはあくまでも Sassなので、コンパイルして、普通の CSS に変換する必要があります。

SassCSS

なにが嬉しいの？

Sass のたくさんの機能を一度に覚えるのは大変だけど…

CSS もそのまま Sass になるので、覚えたトコだけ使って書くことが出来る。

大事

覚えたてのほんのちょっとのSass構文からだけでも、Sassを使う事ができます。

ちょっとだけ Sass！.post { ... }.post header { @extend .clearfix; }.post header > h1 { color:#ABCDEF; }.post header .post-meta { ... }.post header .tags { ... }.post header a { .... }.post header a:hover { color:#89ABCD; }.post.promotion { ... }

Sass

ちょっとだけ Sass！ ココ だけ!

あとは普通のCSSでも大丈夫！

.post { ... }

.post header { @extend .clearfix; }

.post header > h1 { color:#ABCDEF; }

.post header .post-meta { ... }

.post header .tags { ... }

.post header a { .... }

.post header a:hover { color:#89ABCD; }

.post.promotion { ... }

Sass

色々覚えなくても始めれる。

少しずつ、覚えたコトから、試せる、使える。

この始めやすさがSassの素晴らしいところだと思います。

だから

|ω･`*)

もし |д´;) ﾊｯ…

|)彡 ｻｯ

この後の話で「難しいな」と思うところが出てきたら､「また今度ね♪」と優しく手を振ってあげてください。でも、それでも大丈夫です。一度に覚えようとすると、難しく感じることになりますが、安心してください。まずは覚えたところから使って行くだけでも、Sassはとても便利で頼もしいツールとして、あなたの業務の効率を上げてくれるはずです！

(‘ヮ＾*)ﾉﾞﾌﾘﾌﾘ.:ﾟ+

Sass を使ってみる

Sassの便利な機能たち

　入れ子 継承

ミックスイン変数

計算 インポート

Sass

い、色々あるやないかい… ( -`д-)

順番に見ていきますが、全部覚えなくても大丈夫だということを忘れないでくださいね！

大事

　　　入れ子level 1

(ﾟｰﾟ)

（いや、でもこれは覚えよう）

同じセレクタを何度も書いています。クラス名を変更時に面倒だったりしますね。こうやって並んでればまだマシに見えますが、CSSプロパティが増えるとすぐに分かり難くなります。

悩み

.post { background: #fff; }

.post header { background: #eee; }

.post header h1 { color: #663; }

.post header .post-meta { color: #999; }

この CSS ですが…

CSS

.post { background: #fff;

header { background: #eee;

h1 { color: #663; } .post-meta { color: #999; } }}

Sass

Sass ではこう書けます。

.post { background: #fff;

header { background: #eee;

h1 { color: #663; } .post-meta { color: #999; } }}

Sass

Sass ではこう書けます。

　プロパティはいつも通りに

.post { background: #fff;

header { background: #eee;

h1 { color: #663; } .post-meta { color: #999; } }}

Sass

Sass ではこう書けます。

階層は入れ子に

.post { background: #fff;

header { background: #eee;

h1 { color: #663; } .post-meta { color: #999; } }}

Sass

Sass ではこう書けます。

入れ子の入れ子も 大丈夫♪

.post { background: #fff;

header { background: #eee;

h1 { color: #663; } .post-meta { color: #999; } }}

Sass

Sass ではこう書ける。同じセレクタを書くのは１度だけ。クラス名を変えた時に、あちこち変更することが減り、僅かなタイポで小一時間無駄にする事も減りそうです｡この例では、一見、行数が増えて見難くなったように感じるかも知れませんが、実際にたくさんのプロパティを書いて行くと､この入れ子の記法のメリットが心にしっくり染み渡ります。

解決

.post { ... }

.post header { ... }

.post header > h1 { ... }

.post header a { ... }

.post header a:hover { ... }

.post.promotion { ... }

では、こんなセレクタは？

CSS

.post { .. header { ... a { ... } a:hover { ... } } header > h1 { ... }}.post.promotion { ... }

Sass

とりあえず、これでOK！普通の CSS 記法で書いてみました。Sassの中に普通の CSS は問題ないので､これも全然 OK です（ここ大事）！

.post { ... header { ... a { ... } a:hover { ... } } header > h1 { ... }}.post.promotion { ... }

Sass

とりあえず、これでOK！…だけど…

問題

同じセレクタが２つずつ登場…｡繰り返し書かなくても良いSassのメリットが、少し減ってしまってます。ちょっぴり残念。でも、Sass はこの問題も解消できます。

複数書いていたセレクタが無くなっていることに注目してください。

.post { ... header { ... > h1 { ... } a { ... &:hover { ... } } } &.promotion { ... }}

Sass

この方が Sass らしい｡

.post { ... header { ... > h1 { ... } a { ... &:hover { ... } } } &.promotion { ... }}

Sass

この方が Sass らしい｡

子セレクタは入れ子に足せばOK

.post { ... header { ... > h1 { ... } a { ... &:hover { ... } } } &.promotion { ... }}

Sass

この方が Sass らしい｡

& を使って親セレクタを指定

｢&」記号は親セレクタを指します。ここでは「a」ですね。つまり、&:hover は、a:hover を意味します｡階層がひとつ上がるイメージになることにだけ注意！

.post { ... header { ... > h1 { ... } a { ... &:hover { ... } } } &.promotion { ... }}

Sass

この方が Sass らしい｡

& を使って親セレクタを指定

こちらも同様に「&」記号は親セレクタ で あ る 「 . p o s t 」 を 表 し 、&:promotion は .post.promotion になります。

a { ... }a a:hover { ... }

CSS

｢&」の展開について補足。

こうじゃない…

CSS

a { ... }a:hover { ... }

こっちが正解。階層が１つ上がる感じ。

a { ... &:hover { ... }}

Sass

｢&」が親セレクタになるからと言って…。

.post .post-meta { float: right; width: 140px;}@media (max-width: 420px) { .post .post-meta { float: none; width: auto; }}

メディアクエリは？

CSS

メディアクエリは定義が分散しがち。メディアクエリはルートに書かないと行けないため、どうしてもプロパティ定義が分散します。また、こういったメディアクエリをどこか１カ所にまとめて書くか、あるいは必要な場所毎に分散させて書くのか、保守性の観点で悩むことはありませんか？

悩み

.post .post-meta { float: right; width: 140px; @media(max-width:420px) { float: none; width: auto; }}

Sass

近くに書ける！入れ子の中にそのまま書ける。そのため記述がとても簡単に！とっても気軽にメディアセレクタが使えます！これは感動もんです！

解決

　　インポートlevel 1

(ﾟｰﾟ)

CSSファイルが長くなり過ぎた…。複数ファイルに分けたら読込も複数に…｡CSS の @import も遅いし…。

悩み

@import "_reset";@import "_options";@import "_layout";@import "_generic";@import "_boxes";@import "_listview";@import "_ad";@import "_misc";@import "typography";

Sass

@import でファイル結合！複数ファイルを、１つのファイルに！Sassファイルで左のように書くと、指定したファイルを全て結合したCSSファイルが出力されます。これで、用途毎にSassファイルを分けつつ、HTMLから読み込むCSSファイルは１つにすることが出来ます。

ファイル名の最初のアンダーバーSassでは、ファイル名が最初のファイルは、読み込まれることを前提としたファイルという位置づけとなり、それらのファイルはCSSファイルに変換されません。

拡張子なしのファイル名で指定

解決

　　ミックスインlevel 2

*ﾟдﾟ*)┣¨ｷ

似たスタイルの指定に悩んだことありませんか？似てるけども、ちょっとずつ違う。同じ見た目にしたいけれど、DOMのコンテキストが異なるなど、異なる要素への類似スタイルの指定に悩んだことがあると思います。

.post .post-meta { font-size:.8em; color: #999999; ... 他の定義 ...}#site-copyright { font-size:.8em; color: #999999; ... 他の定義 ...}

例えば、同じスタイルがアチコチに分散…。

CSS

同じスタイルの指定があちらこちらに…｡変更が入った時には、覚えている箇所や該当箇所を検索して変更するなど、管理が面倒で、かつ間違いの元になります｡

定義が分散…スタイルが分散…

悩み

Sass

Sassなら、１カ所で定義して、読み込める｡

❶ @mixinで定義

@includeで読込む❷ @includeで読込む

@mixin weak-text { font-size:.8em; color: #999999;}.post .post-meta { @include weak-text; ... 他の定義 ...}#site-copyright { @include weak-text; ... 他の定義 ...}

mixinで定義した内容が挿入されるmixinで定義した内容がコピーされる

１カ所で定義した内容を、mixinの名前で参照してこのように取り込めるので、とても簡単に、かつ分かりやすく、同じスタイル指定をアチコチに適用することが出来ますね！

.post .post-meta { font-size:.8em; color: #999999; ... 他の定義 ...}#site-copyright { font-size:.8em; color: #999999; ... 他の定義 ...}

そうすると、CSSではこうなる♪

CSS

　　継承level 3

*ﾟдﾟ*)┣¨ｷ

定義が分散…セレクタが分散…

悩み

今度は、同じセレクタがアチコチに分散…。

CSS

.bg-light,

.post .header,

.post .footer,

.archive .header,

.page-footer,

.list-box .header { background-position: left top; background-repeat: no-repeat; background-image: url(img/bg-light.png);}.post .header { ...他の定義... }

スタイルが同じになるセレクタを列挙してスタイル定義することも多いと思いますが､そうすると同じセレクタがアチラチに分散してCSSの見通しが悪くなります｡

Sassなら、定義済みのクラスを継承できる｡❶ クラスを定義

（普通のクラス）.bg-light { background-position: left top; background-repeat: no-repeat; background-image: url(img/bg-light.png);}.post .header { @extend .bg-light; ...他の定義... }.post .footer { @extend .bg-light; ... }.archive .header { @extend .bg-light; ... }.page-footer { @extend .bg-light; ... }.list-box .header { @extend .bg-light; ... }

Sass

❷ @extendで継承

継承した方のセレクタが継承元の定義に

コピーされる

書き方はミックスインの @include と似ていますが、CSSで再現するアプローチは異なっていますね！

.bg-light, .post .header, .post .footer,

.archive .header, .page-footer, .list-box .header { background-position: left top; background-repeat: no-repeat; background-image: url(img/bg-light.png);}.post .header { ...他の定義... }.post .footer { ... }.archive .header { ... }.page-footer { ... }.list-box .header { ... }

そうすると、CSSではこうなる♪

CSS

ミックスインと継承の違い。

CSS

Sass

.cute, .akb48 {...

}@extend 側のセ

レクタが継承元のセレクタにコピーされる

CSS

Sass

.akb48 {...ミックスインの定義...

}@mixin の定義が

@include した場所にコピーされる

ミックスイン 継承

@mixin cute { ...定義... }.akb48 { ... @include cute;}

.cute { ...定義... }

.akb48 { ... @extend .cute;}定義がコピー セレクタがコピー

　　変数level 3

(;ﾟ∀ﾟ)

$baseFontSize: 14px;

Sass

変数とは？

値変数（変数の頭には「$」マークを付ける）

値を変数に入れる

POINT 変数には好きな名前が付けられる。

.post header > h1 { color:#ABCDEF; }

.post header a { color:#ABCDEF; }

.post header a:hover { color:#789ABC; }

色んな色が出てきます。管理が…

CSS

CSS内で同じ色が分散して管理が難しい。また、#ABCDEF だけみても、それが「何の為の色」なのか、分からない。

悩み

ひと目で、サイトのテーマカラーだ

と分かる！

Sass

変数で名前を付けて管理。$cTheme: #ABCDEF;$cThemeDeep: #789ABC;

.post header { h1 { color: $cTheme; } a { color: $cTheme; &:hover { color:$cThemeDeep; } }}

色に名前を付けて管理する。変数で色を入れて管理できます。変数には好きな名前を付けれるので、名前でそれぞれの色の意味や用途を表現できるようになります。

body { font-size: 14px; }p.lead { font-size: 18px; }p.weak { font-size: 10px; }p.footnone { font-size: 10px; }h1 { font-size: 24px; }

フォントのサイズも色々あるのですよ。

CSS

またrootからem単位で相対指定もできますが、親要素のフォントサイズを考慮する必要があるなど、絶対値指定をしたい時には扱いにくい面があります。remもまだ一部使えないケースもあります。

フォントサイズも同様。あちこちに同じ意味のフォントサイズ指定が分散。また､指定した箇所ではその意味が分かりづらい。

悩み

$fsBase: 14px;$fsEmphasis: 18px;$fsWeak: 10px;$fsTitle: 24px;

body { font-size: $fsBase; }p.lead { font-size: $fsEmphasis; }p.weak { font-size: $fsWeak; }p.footnone { font-size: $fsWeak; }h1 { font-size: $fsTitle; }

Sass

変数で管理できる。フォントサイズも名前を付けて管理。フォントサイズも色と同様に変数を使って管理できます。こちらも、値に名前を付けることで、それぞれのフォントサイズの指定がどんな意味合いで付けられたものなのか簡単に分かるように書けます。

どんなルールに基づいてサイズ指定されている

のかすぐ分かる!

変数を使って値に名前を付けることで、利用する箇所でその意味が分かりやすくなる｡

POINT

変数に限らず、ミックスインもスタイルのセットに名前を付けて管理できるので、同じように機能します。名前を付ける＝値に意味を付与する。Sassを使うと、それぞれの値の指定箇所でその値の意味が分かるように表現でき、保守性が大幅に向上します。

　　計算level 3

(;ﾟ∀ﾟ)

color: #666666 + #333333;// #999999color: #666666 - #222; // #444444color: #666666 * 2; // #CCCCCCcolor: #666666 / 3; // #222222

Sass

｢+｣｢-｣｢÷｣｢×｣ 始めました。

見たまんまです！難しく考えないでください！そのまんま！ 見たまんまです！ (*’-’*)

font-size: 14px + 2; // 16pxfont-size: 1em + 4; // 5emfont-size: 2em * 3; // 6emfont-size: (18px / 2); // 9pxfont-size: 2em + 2px // ERROR

Sass

｢+｣｢-｣｢÷｣｢×｣ 始めました。

フォントサイズの計算もできます。注意点として、単位が異なるとエラーになります。また、割り算の計算は括弧を付けなければダメない場合があります。フォントの計算に限らず、コンパイルされたCSS上で計算式がそのまま表示されたら、とりあえず括弧でくくってみましょう。

$cTheme: #ABCDEF;$cThemeDeep: #789ABC;

$cTheme: #ABCDEF;$cThemeDeep: #ABCDEF - #333333; // #789ABC

Sass

色んな場所で計算できます。

上の例では、#789ABCは#ABCDEFから #333333 だけ小さな数なので、上のように書き直すことができます。

$cTheme: #ABCDEF;$cThemeDeep: #ABCDEF - #333333;

$cTheme: #ABCDEF;$cThemeDeep: $cTheme - #333333; // #789ABC

Sass

変数と値、変数と変数を計算する。

変数と値を組み合わせて計算できます。結果はもちろん同じです。また、変数同士の計算もできます。そして、この仕組みを使うと、例えば…

なにが嬉しいのか？例えば…

$cPositive: #0000CC;$cNegative: #EEEEEE;$cEffect: 0.8;

.button { &.positive { color: $cPositive; &:hover { color: $cPositive * $cEffect; } /* #0000A3 */ } &.negative { color: $cNegative; &:hover { color: $cNegative * $cEffect; } /* #BEBEBE */ }}

Sass

応用：ルールに沿った色を適用する。これはロールオーバー時に、一律80%の薄い色を適用する例です。$cPositive、$cNegativeは、それぞれポジティブ/ネガティブボタンの基本色｡0.8を乗じることで一定のルールに沿った色指定を実現しています。

値の素性を表現することで、設計意図が後になっても分かる。例えば、元の色が #0000CC で、ロールオーバー時には 20% 暗い色を付けたい時に、電卓で計算すると #0000A3 となり、これを CSS に指定していました。しかしこの #0000A3 という値を、後で見た時に、それが #0000CC から 20 % 暗い色だと直感的に分かるかというと、コメントでも残していないと分からないと思います。しかしこれを、#0000CC * 0.8 と表現できれば、その色が「#0000CC の 20 % 暗い色」とすぐ分かります。このように、スタイルの設計意図を Sass ファイルにはそのまま残しておくことが出来るため、保守のフェーズでも当初の設計意図を活かした変更を行うことができるようになります。

POINT

　　ミックスインlevel 4

（レベルアップして再登場）

(？ω？)

ミックスインは変数と組み合わせてより高度な使い方ができます。

@mixin basebox { margin:1em auto; border:2px solid; padding:5px 1em; border-radius: 4px;}.box { @include basebox; border-color:#CCC;}.promotion-box { @include basebox; border-color:#990; background: #FF9;}

Sass

これは、ミックスインの簡単な例。

｢basebox」をミックスインしています｡.box、.promotion-boxそれぞれの @include の箇所に、baseboxの定義が追加されます。でも…

@mixin basebox { margin:1em auto; border:2px solid; padding:5px 1em; border-radius: 4px;}.box { @include basebox; border-color:#CCC;}.promotion-box { @include basebox; border-color:#990; background: #FF9;}

Sass

似た定義を２回行っている。

よく見ると border-color の定義は２回行われています。別にこれでも構いません！でも、Sassではもうひと工夫できます｡

@mixin basebox($borderColor) { margin:1em auto; border:2px solid $borderColor; padding:5px 1em; border-radius: 4px;}.box { @include basebox(#CCC);}.promotion-box { @include basebox(#990); background:#FF9;}

Sass

発展：ミックスインで変数を使う。

このように変数を使い、@includeする時に一部の値を指定できます。

@mixin box-shadow($sx, $sy, $boke, $color) { -webkit-box-shadow: $sx $sy $boke $color; -moz-box-shadow: $sx $sy $boke $color; -ms-box-shadow: $sx $sy $boke $color; -o-box-shadow: $sx $sy $boke $color;}

.box { @include box-shadow(1px, 1px, 2px, #ABCDEF);}

Sass

たくさんの値も渡せます。

@mixin basebox($borderColor:#CCC) { margin:1em auto; border:2px solid $borderColor; padding:5px 1em; border-radius: 4px;}.box { @include basebox; // #cccが使われる}.promotion-box { @include basebox(#990); // #990が使われる background:#FF9;}

Sass

デフォルト値も指定できます。

こうしておくと、@includeの時に値を指定したらその値になり、指定しなかった時には、デフォルト値が適用されます。

デフォルト値

他にもあるよ！ Sass の機能‣ コメント

● /* ... */ CSSに出力される（Output Style = compressed 以外）● /*! ... */ CSSに出力される（必ず。コピーライト等の記入に！）● // ... CSSには出力されない

‣ 条件分岐● @if { ... } @else if { ... } @else { ... }

‣ ループ● @for $var from 1 to 3 { ... }● @each $name in hoge, hage, mage { ... }● @while $i < 10 { ... }

‣ 関数（…もう省略！）

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

いろいろ便利なSass の機能を見てきました。

これらを駆使すると、同じようなスタイル表現を簡潔に書けたり、ぱっと見てスタイルの意味が分かるようなスタイルの定義をすることが出来ます。

では Compass ではどんなことが出来るのでしょうか？

Compass を使ってみる

Sass

Compass は Sass をもっと便利にするものでした。

Compass

Sass

例えば、Compassには、Web制作でよく使いそうな道具が用意されています。

Compass

例えば…

@mixin box-shadow($sx, $sy, $boke, $color) { -webkit-box-shadow: $sx $sy $boke $color; -moz-box-shadow: $sx $sy $boke $color; -ms-box-shadow: $sx $sy $boke $color; -o-box-shadow: $sx $sy $boke $color;}

.box { @include box-shadow(1px, 1px, 2px, #ABCDEF);}

Sass

さっきのミックスインですが…

実は Compass に有る。

@import "compass";

.box-normal{ @include single-box-shadow;} 

.box-promotion { @include box-shadow(red 2px 2px 10px);}

.box-note { @include box-shadow( rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset);}

Sass

Compass の box-shadow ミックスイン。

　Compassの定義を読み込む

@import "compass";

.box-normal{ @include single-box-shadow;} 

.box-promotion { @include box-shadow(red 2px 2px 10px);}

.box-note { @include box-shadow( rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset);}

Sass

Compass の box-shadow ミックスイン。

Compassの機能を使うために、@importでcompass の定義ファイルを読み込みます。

@import "compass";

.box-normal{ @include single-box-shadow;} 

.box-promotion { @include box-shadow(red 2px 2px 10px);}

.box-note { @include box-shadow( rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset);}

Sass

Compass の box-shadow ミックスイン。

後は使うだけ後は使うだけそして、使う

.box-normal {  -webkit-box-shadow: 0px 0px 5px #333333;  -moz-box-shadow: 0px 0px 5px #333333;  box-shadow: 0px 0px 5px #333333;}

.box-promotion {  -webkit-box-shadow: red 2px 2px 10px;  -moz-box-shadow: red 2px 2px 10px;  box-shadow: red 2px 2px 10px;} .box-note {  -webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;  -moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;  box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;}

CSS

Compassのmixinを読み込んだだけで、ベンダープリフィックスも考慮したCSSが適用されます！

Compass には、こんな便利なミックスインがいっぱい！幾つかご紹介します｡

今日はこれらの書式は覚えようとしないでください！今日は気になった mixin の名前をメモしておくぐらいで、実際に必要になった時に、リファレンスを開くようにしてください。 (*’-’*)

但し!

@import "compass/reset";http://compass-style.org/reference/compass/reset/

CompassのリセットCSSを読み込みます。Compassの他に、Blueprint のリセットCSSもあります。独自のリセットCSSがもしあれば、それをあらかじめ別ファイルにしておいて @import しても良いです。

ちなみに僕は最近はあまりこだわらずに、だいたいいつも最新の HTML5Boilerplate を利用しています。

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;}

html { line-height: 1;}

ol, ul { list-style: none;}

table { border-collapse: collapse; border-spacing: 0;}

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;}

q, blockquote { quotes: none;}q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;}

a img { border: none;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block;}

Sass

.selector { @include pie-clearfix;}http://compass-style.org/reference/compass/utilities/general/clearfix/

いわゆるClearfixです。他に「clearfix」もありますが、現時点でより一般的なのは「pie-clearfix」だと思います。

div { *zoom: 1;}div:after { content: ""; display: table; clear : both;}

Sass

.selector { min-width: 40px; width: auto !important; width: 40px; min-height: 80px; height: auto !important; height: 80px;}

.selector { @include min-width(40px); @include min-height(80px);}http://compass-style.org/reference/compass/utilities/general/min/

いわずもがなです。 (*’-’*)

Sass

.selector { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline;}

.selector { @include inline-block;}http://compass-style.org/reference/compass/css3/inline_block/

@include inline-block($alignment) を指定できます。デフォルトの $alignment は middle です。

Sass

.selector { filter : progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5;}

.selector { @include opacity(0.5);}http://compass-style.org/reference/compass/css3/opacity/

@include inline-block($alignment) を指定できます。デフォルトの $alignment は middle です。

Sass

.selector { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;}

.selector2 { -webkit-border-radius: 6px 12px; -moz-border-radius: 6px / 12px; border-radius: 6px / 12px;}

.selector { @include border-radius(6px);}.selector2 { @include border-radius(6px, 12px);}http://compass-style.org/reference/compass/css3/border_radius/

Sass

.selector { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis;}

.selector { @include ellipsis;}http://compass-style.org/reference/compass/typography/text/ellipsis/

Sass

.selector {text-shadow: 1px 1px 0 rgba(0, 0, 255, 0.2);

}

.selector { @include single-text-shadow( rgba(blue, 0.2), 1px, 1px , 0);}http://compass-style.org/reference/compass/css3/text-shadow/

１つの要素に１つだけ text-shadow を適用する。

Sass

.selector { text-shadow:

rgba(0, 0, 255, 0.2) 1px 1px 0, rgba(255, 0, 0, 0.6) 1px 1px 0;

}

.selector { @include text-shadow( rgba(blue, 0.2) 1px 1px 0, rgba(red, 0.6) 1px 1px 0);}http://compass-style.org/reference/compass/css3/text-shadow/

１つの要素に複数の text-shadow を適用する。

Sass

a { text-decoration: none; color : #333333;}a:hover { text-decoration: underline;}a:visited { color : #666666;}a:focus { color : #777777;}a:hover { color : #999999;}a:active { color : black;}

a { @include hover-link; @include link-colors(#333, #999, #000, #666, #777);}http://compass-style.org/reference/compass/typography/links/hover_link/http://compass-style.org/reference/compass/typography/links/link_colors/

リンクスタイルを設定できます。link-colors では、$normal、$hover、$active、$visited、$focus の順に色を指定できます。

Sass

Columns Transition

Tables

HelpersSprites

決してあおる意味ではなくて「使いたいところだけ使う」。これが大事。

この他にも便利なものがいっぱい。どれを使うかはアナタ次第♪

必要になった時に、リファレンスを見る｡http://compass-style.org/reference/compass/

英語だけど、リファンレンスだし、問題ないっすよ！

ところで、ブラウザのサポートは？IEのどのバージョンから考慮されてる？ moz や webkit のベンダープリフィックスは？

IE6+、-webkit、-moz、-ms、-o をデフォルトでサポート｡サポート範囲は設定変数を定義して変更できます。http://compass-style.org/reference/compass/support/

※2013 年 11 月 7 日 現在

ブラウザサポート設定の初期値変数名 デフォルト値

$legacy-support-for-ie TRUE$legacy-support-for-ie6 $legacy-support-for-ie$legacy-support-for-ie7 $legacy-support-for-ie$legacy-support-for-ie8 $legacy-support-for-ie$experimental-support-for-mozilla TRUE$experimental-support-for-webkit TRUE$support-for-original-webkit-gradients TRUE$experimental-support-for-opera TRUE$experimental-support-for-microsoft TRUE$experimental-support-for-khtml FALSE$experimental-support-for-svg FALSE$legacy-support-for-mozilla TRUE

上記の変数を Sass ファイル内に定義して、デフォルト値を変更できます。

(*'-'*)

というわけで…

Sass と Compass の概要を一通り見たので、

今から Sass を書いてみよう！とにかくやってみるのが一番です！僕の説明だけでは聞くだけでは難しいと思ったことも、やってみると簡単なことが多いですよー！

その前に、Sass から CSS への変換ツールの使い方の説明をしまーす。

Prepros の使い方

プロジェクトの追加

プロジェクトの追加

プロジェクトの追加

プロジェクトのフォルダを選ぶ

ファイルの一覧

Preprosが処理できるファイルが自動で一覧表示

プロジェクトが追加された

SassとCSSのファイル

上がscssファイル

下が変換後のCSSファイル

クリックして変換後のCSSファイルの保存先を変えることができます｡

ファイルの変換設定

ファイルを選択すると変換設定が出てくる

自動コンパイル

scssが更新されたら自動でコンパイル

都度コンパイルボタンを押さなくてOK

ファイルと行番号の表示

CSSファイルにSassファイルと行番号を

表示

SassとCSSの対応が分かるので、CSSのデバッグに活用できます。ただ、たぶん自分で作成したSassの場合、ブラウザのデベロッパーツールでCSSの適用状況を確認したら、それがSassファイルのどこかはだいたい分かりますので、これは無くてもデバッグ特に支障は感じないと思います。外部からのファイルで構造が分かっていない時には便利かも知れません。

Compassを使う

Compassを使いたい時は必ずON。だからほぼ常にON。

Compassを使う

Compassの高度な機能を使う

Compassの高度な機能を使う

但し、ONにするには、config.rb が必要！config.rbは、Compassの設定ファイルです。Preprosでプロジェクトを管理しているだけなら、config.rb は不要ですが、Compassのより高度な機能は使えません。外部から受け取ったSassリソースを編集する場合には、おそらくconfig.rbが同梱されていると思うので、ある場合はこのチェックを付与してください（プロジェクトのルートにconfig.rbが配置されるように、Preprosのプロジェクトを追加してください）。

←圧縮モード←セレクタとプロパティを１行既述←Sass上の入れ子を擬似的に再現←典型的なCSSの書き方

出力形式を指定する

プロジェクトツールバー

プロジェクトツールバー

プロジェクトツールバー

リロード

設定

画像最適化

サーバー起動

削除

FTP

※FTP機能は Prepros の PRO 版のみ。

プロジェクトツールバー

クリックしたらWEBサーバーが起動

簡単にCSSやHTMLを確認できる！自動リロードでCSS調整も便利！　　

プロジェクトの設定

ブラウザ自動リロード

ブラウザの自動リロードのON/OFFを設定できます。

プロジェクトの設定

CSSファイルのデフォルトの出力先を指定します。

CSSの出力先フォルダ

Sassにエラーがある時

エラーがあれば出てくるのでクリックで詳細表示

Sassにエラーがある時

ファイル、行番号、エラーの内容などが表示される

では、やってみましょうー！

実践中...

実際の利用と運用など（若干妄想含み）

最後に、実際の利用や運用時に考えることなど、個人的な経験からまとめてみました。

Sass のメリット‣ CSSの管理がシンプルに

● 変数やミックスインで値やスタイルに名前を付け、意味合いで管理

● 大きなプロジェクトほどに力を発揮

‣ 統一しやすい● 変数や計算の機能で、色やフォントサイズ、レイアウトマージン等の統一が容易になる

● チームで作業する時も、Sassの定義という形で、レギュレーションを共有できる（変数名から意図を汲み取る）

‣ 再利用しやすい● インポートミックスイン機能を利用することで、汎用的なスタイル（リセットCSS）やスタイルを、再利用しやすい単位で管理できる

‣ 設計方針が変わる（大事）● 変数、継承、ミックスインを使い、意味合いを優先したCSSを書く事ができるようになる

● DOMコンテキストで変化するCSSの既述性も向上する

● 結果、CSSの保守性とHTML上の既述との兼ね合いでの悩みが激減する

Sass 導入の課題

‣ 導入には関係者との調整が必要● お客様／制作チームの両方に● そもそもSass知らない人もいる

● コンパイルできる環境ばかりでもない

● チームメンバーが使っていない時、使ってもらえるか？

● お客様がメンテナンスする場合、お客様で対応できるか？

● 使ってもらえるにしてもどこまで？（高度な機能も使える？）

● LessやStylusといった、他のCSSメタ言語派の人もいたりします（特に問題なさそうだけれど）

‣ CSSが大きくなる傾向が…● コンパイル後のCSSが大きくなりやすい● 対策の一つとして、ネストを浅くするように設計するなど

課題はあるけれど、Sass を実際に使ってみると、アナタはもう離れられないかも？

個人的には､普通のCSS書いたりすると「チッ、Sassじゃない…めんどくちゃい」とか思ったり、手が震えて書けないこともあったりして、なるべく採用できたらと思っています。

では、Sassを採用するにあたってどんなことを考えたか…

Sass導入の検討

‣ チーム内に未経験メンバーが居る● よほどでなければ乗り越えたい。

● もし、Sassを使ったことが無い人がいても、使ってもらう良い機会になる

‣ お客様と● そもそもお客様先でCSSをメンテナンスされるのか？● メンテしないならSassの採用を報告する程度でも良いと思う

● CSSをメンテされるなら、Sassを使って頂けるかを確認。

● 使ってもらえるなら、第三者がメンテナンスすることをより考慮した作りを心がける（普段から出来てれば良いが、より考える）

● CSSをメンテするが、Sassを使っていな頂けない時は● Sassの導入を諦めるか…● 【対策】お客様先で自由に改変できる空のCSSファイルを作成して、HTMLからLink。Sass由来のCSSをオーバーライドしてもらう感じで（弊害も多いと思うが…）

制作のポイント‣ CSSの設計はちゃんと考える

● 当然だけど、ちゃんとしたCSS の設計がこれまでどおり必要なことは変わらない

● Sass を使うと、力技をスマートに表現できる部分は増えるが、使い過ぎると CSS を肥大化させるなどの弊害もあるので注意

● HTML のマークアップと CSS の保守性を考えて利用していく● OOCSSなどの考え方も活用していく

‣ サイトの規則を明確に● 変数､Mixin､ファイル構成などで､サイトの基本的な決まりごとを表現する

● 名前は、意味が分かり、かつ使い方も想像できるように

● あちこちのファイルを見ないでも、サイトの規則が分かるように

● 例えば､「_config.scss」といったファイルを作り、サイトの基本規則となる変数やMixinを集約する（１カ所にある方が分かりやすいハズ）

制作のポイント

‣ Sass 慣れしていないお客様/メンバーがいる時は？● 同じツールを使う（サポートしやすい）

● ディレクトリ構成を簡単にする（Preprosなどでも簡単にセットアップできるように）

● 高度な機能の利用は控える？

‣ 過ぎない（とても大事）● 変数を作り過ぎない● mixinを作り過ぎない● ファイルを分け過ぎない● 工夫し過ぎない● カッコつけ過ぎない● 必要なものを必要に応じて追加する● 便利そうだからと作ったものは、あらかた忘れて使わない

受け取り側の対応

‣ 技術的な不安は感じなくてOK● 知らないMixinも修正するのは難しくはない

● 使われているMixinの細かな仕様は特に気にしないでOK● Compassならドキュメントある● カスタムMixinなら定義があるので見たらOK

● 追加や修正で分からない時は、Sassの中に普通にCSS書ける

● 但し、CSSを書き換えるのはNG

‣ 受け取ったら Sass の大まかな構成（設計）を理解しておく● 納品ファイルの大まかな構成、各ファイルの意味合いなどを確認する● 詳細より外観● 分からない部分は確認● もし構成が分かりにくいと思ったら、制作者に趣旨を確認する（要は、分からない人が見る事に配慮されているか？ 問題があると思ったら、分かりやすくまとめてもらうようにお願いしてみる）

（運用側の皆さんへのアドバイスです）

受け取り側の対応

‣ Prepros でメンテナンスする場合● config.rb が同梱されているか確認する

● 有れば、config.rb があるフォルダをルートにして Prepros にプロジェクト登録

● 無ければ、次のディレクトリを指定してPrepros にプロジェクト登録

● webroot に Sass フォルダが含まれていたらwebroot をプロジェクト登録

● あるいは、webroot と sass フォルダの両方を含むフォルダをプロジェクト登録● ここがややこしくなるので、制作側はディレクトリ構成を単純にしてあると良いハズ

●

(*'-'*)

…ということで、

Sass/Compass について見て来ました。

今日から使える？ (*'-'*)…ような気分になってくれてたら嬉しいんですが～。もしやっぱり難しそうだって思った人がいたら、入れ子と変数だけでも良いので、とりあえず Sass を書いてみてほしいっす。

いちおう、僕にとって Sass は、既に無くてはならないツールになっています｡

CSSの面倒な部分が楽になったり。

重複を減らし、値やスタイルに名前を付けることで保守性を向上させたり。

HTML 側もよりスマートに書けたり。

ここら辺は OOCSS などとのパラダイムと合わせて考えたいですが。

いろいろと便利なんですが、

結局 Sass というツールは、

CSS の弱点を補って、制作・保守効率を高め、

より早く、よりシンプルな思考で、CSS を記述できる便利なヤツに過ぎません｡

だから、CSS の本質的な設計自体は、これまでどおりしっかりと考えたいと思います。

ただ…

CSSの記述性の問題で悩むことが減って、スタイル定義の本質以外の部分に割く時間を減らすことが出来るでしょう。

そして、ズルして浮いた時間は、ホントにやるべきタスクのために。

これが Sass を導入して得られる一番素敵なコトかも知れません♪

(*'-'*)

ご清聴、ありがとうございました！

この文書は クリエイティブ・コモンズ 表示 - 継承 2.1 日本 ライセンスの下に提供されています。