Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。

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

2. 自己紹介
‣
ノジマユウジ
‣
株式会社フォーエンキー
代表
絶賛
お仕事
募集中
●
●
●
●
●
●
Android/iOSアプリ
Webアプリ/WordPress
Winデスクトップアプリ
Web制作全般
グラフィックデザイン
印刷
‣
PythonとJavaScriptが大好
き。Javaも好き、C#も面白
い。要するに言語好き
‣
おしゃれも大好き☆
リボンやお花が好き☆
‣
参加コミュニティ
●
●
●
日本Androidの会 神戸支部
HTML5-WEST.jp
WordBench 神戸

3. 自己紹介
@yuka2py
実体
良い子 ほぼ留守
書籍を執筆しました。
JavaScript についても基礎から
応用・発展まで詳しく書かれています。
良かったら書店で手に取ってください。
http://www.amazon.co.jp/dp/4798129682

4. 最近のボク
Web/WordPress
Windows
Android/iOS
Design
Python
2013年10月31日
株式会社フォーエンキー調べ
Python
2%
Design
8% Web/WordPress
28%
Android/iOS
42%
Windows
20%

5. 最近のボク（ホント）
Web/WordPress
Windows
Android/iOS
Design
Python
お嫁
2013年10月31日
株式会社フォーエンキー調べ
愛
Web/WordPress
14%
Windows
10%
お嫁
50%
恐
Python
Android/iOS
1%
21%
Design
4%

6. はじめに
本セッションでは、Sass/Compassの概要とツールとの関
連、またその基礎的な構文を紹介します。またデザイナー
の方でも実践しやすいように「Prepros」というGUIツー
ルの使用法も解説しています。
対象者
・まだ Sass/Compass に触れたことの無い方で、
・でもきっと良いものだろうと夢と希望を抱いている方
・ターミナル/コンソールなど CUI が苦手な方
・CSSの設計や構造化の手法に悩んでいる方

7. ご注意
本セッションでは簡単の為に、Sass中の「Scss」記法を
「Sass」として取り扱い、またほとんどの箇所でその点に
ついて特には言及しません。
この資料だけ読まれる方へ
本資料はハンズオン前の解説のためのものですので、解説
資料としては不足がありますが、ご容赦ください。

8. (*'-'*)

9. What’s Sass?
Sass is the most mature, stable, and powerful
professional grade CSS extension language in the world.
http://sass-lang.com/

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

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

12. (́･ω･`)ｳｰ...

13. What’s Compass?
Compass is an open-source CSS Authoring Framework.
http://compass-style.org/

14. Open-source
CSS Authoring Framework.
なるほど。こちらはオーサリングの為のフレームワークね。

15. (́･ω･`)...

16. よくわかんない？

17. (́･ω･`)ｴｯ...

18. よくわかんないの？

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

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

21. (･ω･)

22. (*^-^)うん!
「明日」って言葉が好き♪

23. という皆さんに、
本日はお集りいただいたハズです！
違ってたら申し訳なく思います。 (́･ω･`)(́-ω-`)) ﾍﾟｺﾘ
でももうどうあがいても本日の内容はこんな感じです。

24. でも、

25. 朗報
今日、PCがあって実践できる方は、
たぶん Sass お持ち帰りできます。
出来なかったら、すまないと思いたいと思います。
(́･ω･`)(́-ω-`)) ﾍﾟｺﾘ

26. なぜなら、

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

28. (*ﾟдﾟ*)

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

30. CSSってメンドクサイ

31. 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 { ... }

32. 何回も同じの書かんとアカンし…
ヽ(,-｀Д́-)ﾒﾝﾄﾞｰ

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

34. 色とかフォントサイズとか、
あちこちに散らばって管理めんどー
o(>_<o)(o>_<)o

35. CSS
.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>

36. どれだけアチコチに
書かなアカンねん！
(óω｀o)

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

38. な、なんなんね？！ これは…。
(･ ･¦¦¦)

39. もう…
(*>_<)

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

41. ( _ )

42. ( _ )
そこで、とある偉い人は考えました。

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

44. ( _ )
よっしゃ、つくったる。

45. (･ ･)
Sass 作ったった！

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

47. では…

48. Sass とか Compass って何？

49. Q
Sassってなんすか？
(？_？)

50. A
CSSメタ言語っす｡

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

52. ごめんごめん

53. A
CSSを
ワリと楽に書けるヤツっす。

54. Q
じゃぁ､Compassってなんすか？
(？_？)

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

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

57. いや。今度はマジです。

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

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

60. Compass でもっとラクチン。
Compass は、Sass をもっと便利にする別のツールです。
ツールだけでなく、Sass の機能をフル活用したお便利グッズも含まれるため、
フレームワークと言われています。
Sass と Compass の関係は？
SassとCompassは、JavaScriptとjQueryみたいな関
係だと思ってください。jQueryを使って書いたプログ
ラムは、あくまでもJavaScriptですよね。jQueryは
JavaScriptの機能を使って、JavaScriptをより便利に
します。Compassも同様に、Sassの機能を活用し
て、Sassをもっと便利にするツールです｡
なので、Compassを使って書かれたファイルもSass
ファイルです。
Compass
Sass

61. Q
Sass は CSS ですか？
(？_？)

62. A
違います。

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

64. Q
じゃどうやって、
Webで使うんですか？？
(？_？)

65. A
CSSに変換します。

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

67. Q
いちいち変換とか面倒っす！
（コンパイル）
(･∀･)

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

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

70. Q
だれが？

71. A
Sassさんとか､Compassさんとか､
Preprosさんとかが…。

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

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

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

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

76. でも今日はSass
Preprosは、
Sass以外にも色々変換できる。
Sassの他にもCSSを生成する別のメタ言語があります。また、HTMLを生成するメタ
言語や、JavaScriptを拡張した言語など、高度化するWeb制作を効率化するために、
多くの言語やツールが開発されていて、Preprosはこれらの処理にも対応しています。
Sass
Less
Stylus
Coffee
LiveScript
Jade
Slim
Haml
Markdown
Prepros
CSS
HTML
JavaScript
特に、フロントエンドエンジニアの皆さんには、JadeやSlim
といった、HTML系のメタ言語は、一度使うと確実にハマると
思います。Sass同様に保守性能が上がるといったこと以上
に、制作時のミスの軽減や高速化が実現できます。極端です
が、個人的にはEmmet要らん！って思ったほどです。

77. 整理すると…
‣
Sassとは？
●
●
‣
‣
CSSを楽に書ける、
CSSに似た別の言語
Sass か Compass かは、
あまり気にしないでOK
●
SassからCSSへの変換ツールを
含む（黒画面）
●
Compassとは？
●
●
●
Sass をもっと便利にする為に
開発されたフレームワーク
Sass の仕組みを活用した便利な
アイテムがたくさん
‣
昨今は Compass を一緒に利用する
ケースが殆どだと思います。
ということで基本
Sass & Compass！
Prepros
●
●
Sass の変換をより便利する為の
コマンドが付属（黒画面）
●
Sass/Compass をCSSに変換でき
るツール
Sass/Compass に限らず、モダンな
Web制作で使われるツールがセット
になっている
GUIアプリケーションなので、
黒画面苦手な人もOK

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

79. Q
じゃ、Sass って実際どんなの？
(*’-’*)

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

81. (́ε｀；)ｳｰﾝ…

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

83. CSS
こんな CSS を、Sass で書くと…
.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 { ... }

84. Sass
こうなるぜっ！ ヒャッハー！
.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 { ... }

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

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

87. せや！ 同じやで！

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

89. Sass
CSS
Sass の構文は、
CSS に新しい構文を追加したもの。
※ほんとはScssファイルの事ですが、ここでは割愛します。 (* - *)
つまり、全ての CSS ファイルは Sass ファイルとして妥当なので、Sass のコンパ
イラでそのままコンパイルすることが出来ます。先の例で、Sass と CSS の内容
が全く同じだったのは、そのためです。

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

91. なにが嬉しいの？

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

93. 大事
CSS もそのまま Sass になるので、
覚えたトコだけ使って書くことが出来る。
覚えたてのほんのちょっとのSass構文からだけでも、Sassを使う事ができます。

94. 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 { ... }

95. 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 { ... }

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

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

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

99. だから
|ω･`*)
もし
|д´;) ﾊｯ…
|)彡 ｻｯ

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

101. Sass を使ってみる

102. Sassの便利な機能たち
入れ子
継承
Sass
変数
計算
ミックスイン
インポート
い、色々あるやないかい… ( -`д-)

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

104. level 1
入れ子
（いや、でもこれは覚えよう）
(ﾟｰﾟ)

105. CSS
この CSS ですが…
.post { background: #fff; }
.post header { background: #eee; }
.post header h1 { color: #663; }
.post header .post-meta { color: #999; }
悩み
同じセレクタを何度も書いています。
クラス名を変更時に面倒だったりしますね。
こうやって並んでればまだマシに見えますが、CSSプロ
パティが増えるとすぐに分かり難くなります。

106. Sass
Sass ではこう書けます。
.post {
background: #fff;
header {
background: #eee;
h1 { color: #663; }
.post-meta { color: #999; }
}
}

107. Sass
Sass ではこう書けます。
.post {
background: #fff;
プロパティは
いつも通りに
header {
background: #eee;
h1 { color: #663; }
.post-meta { color: #999; }
}
}

108. Sass
Sass ではこう書けます。
.post {
background: #fff;
階層は入れ子に
header {
background: #eee;
h1 { color: #663; }
.post-meta { color: #999; }
}
}

109. Sass
Sass ではこう書けます。
.post {
background: #fff;
header {
入れ子の入れ子も
大丈夫♪
background: #eee;
h1 { color: #663; }
.post-meta { color: #999; }
}
}

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

111. CSS
では、こんなセレクタは？
.post { ... }
.post header { ... }
.post header > h1 { ... }
.post header a { ... }
.post header a:hover { ... }
.post.promotion { ... }

112. Sass
とりあえず、これでOK！
.post { ..
header { ...
a { ... }
a:hover { ... }
}
header > h1 { ... }
}
.post.promotion { ... }
普通の CSS 記法で書いてみました。
Sassの中に普通の CSS は問題ないので､
これも全然 OK です（ここ大事）！

113. Sass
とりあえず、これでOK！…だけど…
.post { ...
header { ...
a { ... }
a:hover { ... }
}
header > h1 { ... }
}
.post.promotion { ... }
問題
同じセレクタが２つずつ登場…｡
繰り返し書かなくても良いSassのメリットが、少し減
ってしまってます。ちょっぴり残念。
でも、Sass はこの問題も解消できます。

114. Sass
この方が Sass らしい｡
.post { ...
header { ...
> h1 { ... }
a { ...
&:hover { ... }
}
}
&.promotion { ... }
}
複数書いていたセレクタが無くなってい
ることに注目してください。

115. Sass
この方が Sass らしい｡
.post { ...
header { ...
> h1 { ... }
a { ...
&:hover { ... }
}
}
&.promotion { ... }
}
子セレクタは
入れ子に足せばOK

116. Sass
この方が Sass らしい｡
.post { ...
header { ...
> h1 { ... }
a { ...
& を使って
親セレクタを指定
&:hover { ... }
}
}
&.promotion { ... }
}
｢&」記号は親セレクタを指します。
ここでは「a」ですね。つまり、
&:hover は、a:hover を意味します｡
階層がひとつ上がるイメージになる
ことにだけ注意！

117. Sass
この方が Sass らしい｡
.post { ...
header { ...
> h1 { ... }
a { ...
& を使って
親セレクタを指定
&:hover { ... }
}
}
&.promotion { ... }
}
こちらも同様に「&」記号は親セレク
タである「.post」を表し、
&:promotion は .post.promotion に
なります。

118. ｢&」の展開について補足。
Sass
a { ...
&:hover { ... }
}
｢&」が親セレクタになるからと言って…。
CSS
CSS
a { ... }
a { ... }
a a:hover { ... }
a:hover { ... }
こうじゃない…
こっちが正解。階層が１つ上がる感じ。

119. CSS
メディアクエリは？
悩み
.post .post-meta {
メディアクエリは定義が分散しがち。
float: right;
メディアクエリはルートに書かないと行けないため、ど
うしてもプロパティ定義が分散します。
width: 140px;
また、こういったメディアクエリをどこか１カ所にまと
めて書くか、あるいは必要な場所毎に分散させて書くの
か、保守性の観点で悩むことはありませんか？
}
@media (max-width: 420px) {
.post .post-meta {
float: none;
width: auto;
}
}

120. Sass
近くに書ける！
解決
.post .post-meta {
入れ子の中にそのまま書ける。
float: right;
そのため記述がとても簡単に！
とっても気軽にメディアセレクタが使えます！
これは感動もんです！
width: 140px;
@media(max-width:420px) {
float: none;
width: auto;
}
}

121. level 1
インポート
(ﾟｰﾟ)

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

123. Sass
@import でファイル結合！
解決
@import "_reset";
複数ファイルを、１つのファイルに！
@import "_options";
Sassファイルで左のように書くと、指定したファイル
を全て結合したCSSファイルが出力されます。
@import "_layout";
これで、用途毎にSassファイルを分けつつ、HTMLか
ら読み込むCSSファイルは１つにすることが出来ます。
@import "_generic";
@import "_boxes";
@import "_listview";
拡張子なしの
ファイル名で指定
@import "_ad";
@import "_misc";
@import "typography";
ファイル名の最初のアンダーバー
Sassでは、ファイル名が最初のファイルは、読み込ま
れることを前提としたファイルという位置づけとなり、
それらのファイルはCSSファイルに変換されません。

124. level 2
ミックスイン
*ﾟдﾟ*)┣¨ｷ

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

126. CSS
例えば、同じスタイルがアチコチに分散…。
.post .post-meta {
font-size:.8em;
color: #999999;
同じスタイルの指定があちらこちらに…｡
悩み 変更が入った時には、覚えている箇所や
該当箇所を検索して変更するなど、管理
が面倒で、かつ間違いの元になります｡
... 他の定義 ...
}
#site-copyright {
font-size:.8em;
color: #999999;
... 他の定義 ...
}
スタイルが分散…
定義が分散…

127. Sass
Sassなら、１カ所で定義して、読み込める｡
@mixin weak-text {
font-size:.8em;
color: #999999;
}
.post .post-meta {
@include weak-text;
... 他の定義 ...
}
#site-copyright {
@include weak-text;
... 他の定義 ...
}
❶ @mixinで定義
❷ @includeで読込む
@includeで読込む

128. CSS
そうすると、CSSではこうなる♪
.post .post-meta {
font-size:.8em;
color: #999999;
... 他の定義 ...
}
mixinで定義した
内容がコピーされる
内容が挿入される
#site-copyright {
font-size:.8em;
color: #999999;
... 他の定義 ...
}
１カ所で定義した内容を、mixinの名前で
参照してこのように取り込めるので、と
ても簡単に、かつ分かりやすく、同じス
タイル指定をアチコチに適用することが
出来ますね！

129. level 3
継承
*ﾟдﾟ*)┣¨ｷ

130. CSS
今度は、同じセレクタがアチコチに分散…。
.bg-light,
.post .header,
.post .footer,
スタイルが同じになるセレクタを列挙し
悩み てスタイル定義することも多いと思いま
すが､そうすると同じセレクタがアチラチ
に分散してCSSの見通しが悪くなります｡
.archive .header,
.page-footer,
.list-box .header {
セレクタが分散…
定義が分散…
background-position: left top;
background-repeat: no-repeat;
background-image: url(img/bg-light.png);
}
.post .header { ...他の定義... }

131. Sass
Sassなら、定義済みのクラスを継承できる｡
.bg-light {
❶ クラスを定義
background-position: left top;
（普通のクラス）
background-repeat: no-repeat;
background-image: url(img/bg-light.png);
❷ @extendで継承
}
.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; ... }

132. CSS
そうすると、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 { ... }
継承した方のセ
レクタが継承元の定義に
コピーされる
書き方はミックスインの @include
と似ていますが、CSSで再現するア
プローチは異なっていますね！

133. ミックスインと継承の違い。
ミックスイン
継承
Sass
Sass
@mixin cute { ...定義... }
.cute { ...定義... }
.akb48 { ...
.akb48 { ...
@include cute;
}
定義がコピー
CSS
}
セレクタがコピー
CSS
.akb48 {
.cute, .akb48 {
...ミックスインの定義...
}
@extend .cute;
@mixin の定義が
@include した場所にコピー
される
...
}
@extend 側のセ
レクタが継承元のセレクタに
コピーされる

134. level 3
変数
(;ﾟ∀ﾟ)

135. Sass
変数とは？
値を変数に入れる
$baseFontSize: 14px;
変数
値
（変数の頭には「$」マークを付ける）
POINT
変数には好きな名前が付けられる。

136. CSS
色んな色が出てきます。管理が…
.post header > h1 { color:#ABCDEF; }
.post header a { color:#ABCDEF; }
.post header a:hover { color:#789ABC; }
悩み
C S S 内 で 同 じ 色 が 分 散 して 管 理 が 難 し
い。また、#ABCDEF だけみても、それ
が「何の為の色」なのか、分からない。

137. Sass
変数で名前を付けて管理。
$cTheme: #ABCDEF;
$cThemeDeep: #789ABC;
色に名前を付けて管理する。
変数で色を入れて管理できます。
変数には好きな名前を付けれるので、名前でそれぞれの
色の意味や用途を表現できるようになります。
.post header {
h1 { color: $cTheme; }
a { color: $cTheme;
ひと目で、
サイトのテーマカラーだ
と分かる！
&:hover { color:$cThemeDeep; }
}
}

138. CSS
フォントのサイズも色々あるのですよ。
body { font-size: 14px; }
p.lead { font-size: 18px; }
p.weak { font-size: 10px; }
p.footnone { font-size: 10px; }
h1 { font-size: 24px; }
悩み
またrootからem単位で相対指定もできますが、親要素
のフォントサイズを考慮する必要があるなど、絶対値指
定をしたい時には扱いにくい面があります。remもまだ
一部使えないケースもあります。
フォントサイズも同様。あちこちに同じ意
味のフォントサイズ指定が分散。また､指
定した箇所ではその意味が分かりづらい。

139. Sass
変数で管理できる。
$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; }

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

141. level 3
計算
(;ﾟ∀ﾟ)

142. Sass
｢+｣｢­｣｢ ｣｢ ｣ 始めました。
color: #666666 + #333333;
// #999999
color: #666666 - #222; // #444444
color: #666666 * 2; // #CCCCCC
color: #666666 / 3; // #222222
見たまんまです！
難しく考えないでください！
そのまんま！ 見たまんまです！ (* - *)

143. Sass
｢+｣｢­｣｢ ｣｢ ｣ 始めました。
font-size: 14px + 2; // 16px
font-size: 1em + 4; // 5em
font-size: 2em * 3; // 6em
font-size: (18px / 2); // 9px
font-size: 2em + 2px // ERROR
フォントサイズの計算もできます。
注意点として、単位が異なるとエラーになります。また、割り算の計
算は括弧を付けなければダメない場合があります。
フォントの計算に限らず、コンパイルされたCSS上で計算式がそのま
ま表示されたら、とりあえず括弧でくくってみましょう。

144. Sass
色んな場所で計算できます。
$cTheme: #ABCDEF;
$cThemeDeep: #789ABC;
$cTheme: #ABCDEF;
$cThemeDeep: #ABCDEF - #333333; // #789ABC
上の例では、#789ABCは#ABCDEFから #333333
だけ小さな数なので、上のように書き直すことがで
きます。

145. Sass
変数と値、変数と変数を計算する。
$cTheme: #ABCDEF;
$cThemeDeep: #ABCDEF - #333333;
$cTheme: #ABCDEF;
$cThemeDeep: $cTheme - #333333; // #789ABC
変数と値を組み合わせて計算できます。
結果はもちろん同じです。
また、変数同士の計算もできます。
そして、この仕組みを使うと、例えば…

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

147. Sass
応用：ルールに沿った色を適用する。
$cPositive: #0000CC;
$cNegative: #EEEEEE;
$cEffect: 0.8;
これはロールオーバー時に、
一律80%の薄い色を適用する例です。
$cPositive、$cNegativeは、それぞれポジティブ/ネガ
ティブボタンの基本色｡0.8を乗じることで一定のルール
に沿った色指定を実現しています。
.button {
&.positive {
color: $cPositive;
&:hover { color: $cPositive * $cEffect; } /* #0000A3 */
}
&.negative {
color: $cNegative;
}
}
&:hover { color: $cNegative * $cEffect; } /* #BEBEBE */

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

149. level 4
ミックスイン
（レベルアップして再登場）
(？ω？)

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

151. Sass
これは、ミックスインの簡単な例。
@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;
}
｢basebox」をミックスインしています｡
.box、.promotion-boxそれぞれの
@include の箇所に、baseboxの定義が
追加されます。でも…

152. Sass
似た定義を２回行っている。
@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;
}
よく見ると border-color の定義は２回
行われています。
別にこれでも構いません！
でも、Sassではもうひと工夫できます｡

153. Sass
発展：ミックスインで変数を使う。
@mixin basebox($borderColor) {
margin:1em auto;
border:2px solid $borderColor;
padding:5px 1em;
border-radius: 4px;
}
.box {
@include basebox(#CCC);
}
このように変数を使い、@includeする
.promotion-box {
時に一部の値を指定できます。
@include basebox(#990);
background:#FF9;
}

154. Sass
たくさんの値も渡せます。
@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);
}

155. Sass
デフォルト値も指定できます。
@mixin basebox($borderColor:#CCC) { デフォルト値
margin:1em auto;
こうしておくと、
border:2px solid $borderColor;
@includeの時に値を
padding:5px 1em;
指定したらその値に
border-radius: 4px;
なり、指定しなかっ
}
た時には、デフォル
.box {
ト値が適用されます。
@include basebox; // #cccが使われる
}
.promotion-box {
@include basebox(#990); // #990が使われる
}
background:#FF9;

156. 他にもあるよ！ Sass の機能
‣
コメント
●
CSSに出力される（Output Style = compressed 以外）
●
/*! ... */
CSSに出力される（必ず。コピーライト等の記入に！）
●
‣
/* ... */
// ...
CSSには出力されない
条件分岐
●
‣
@if { ... } @else if { ... } @else { ... }
ループ
●
●
@each $name in hoge, hage, mage { ... }
●
‣
@for $var from 1 to 3 { ... }
@while $i < 10 { ... }
関数（…もう省略！）
http://sass-lang.com/documentation/file.SASS_REFERENCE.html

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

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

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

160. Compass を使ってみる

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

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

163. 例えば…

164. Sass
さっきのミックスインですが…
@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);
}

165. 実は Compass に有る。

166. Sass
Compass の box-shadow ミックスイン。
@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);
}

167. Sass
Compass の box-shadow ミックスイン。
@import "compass";
.box-normal{
@include single-box-shadow;
}
Compassの定義
を読み込む
.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);
}
Compassの機能を使う
ために、@importで
compass の定義ファイ
ルを読み込みます。

168. Sass
Compass の box-shadow ミックスイン。
@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);
}

169. CSS
.box-normal {
-webkit-box-shadow: 0px 0px 5px #333333;
-moz-box-shadow: 0px 0px 5px #333333;
box-shadow: 0px 0px 5px #333333;
}
Compassのmixinを読み
込んだだけで、ベンダープ
リフィックスも考慮した
CSSが適用されます！
.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;
}

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

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

172. Sass
@import "compass/reset";
http://compass-style.org/reference/compass/reset/
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;
}
CompassのリセットCSSを読み込みます。
Compassの他に、Blueprint のリセットCSSもあります。
独自のリセットCSSがもしあれば、それをあらかじめ
別ファイルにしておいて @import しても良いです。
ちなみに僕は最近はあまりこだわらずに、だいたいいつも最新の
HTML5Boilerplate を利用しています。
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;
}

173. 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;
}

174. Sass
.selector {
@include min-width(40px);
@include min-height(80px);
}
http://compass-style.org/reference/compass/utilities/general/min/
いわずもがなです。 (* - *)
.selector {
min-width: 40px;
width: auto !important;
width: 40px;
min-height: 80px;
height: auto !important;
height: 80px;
}

175. Sass
.selector {
@include inline-block;
}
http://compass-style.org/reference/compass/css3/inline_block/
@include inline-block($alignment) を指定できます。
デフォルトの $alignment は middle です。
.selector {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
}

176. Sass
.selector {
@include opacity(0.5);
}
http://compass-style.org/reference/compass/css3/opacity/
@include inline-block($alignment) を指定できます。
デフォルトの $alignment は middle です。
.selector {
filter:
progid:DXImageTransform.
Microsoft.Alpha(Opacity=
50);
opacity: 0.5;
}

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

178. Sass
.selector {
@include ellipsis;
}
http://compass-style.org/reference/compass/typography/text/ellipsis/
.selector {
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

179. Sass
.selector {
.selector {
@include single-text-shadow(
text-shadow: 1px 1px 0
rgba(blue, 0.2), 1px, 1px , 0); rgba(0, 0, 255, 0.2);
}
}
http://compass-style.org/reference/compass/css3/text-shadow/
１つの要素に１つだけ text-shadow を適用する。

180. Sass
.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 を適用する。
.selector {
text-shadow:
rgba(0, 0, 255, 0.2) 1px 1px 0,
rgba(255, 0, 0, 0.6) 1px 1px 0;
}

181. Sass
a{
text-decoration: none;
color: #333333;
a{
}
a:hover {
@include hover-link;
text-decoration: underline;
}
@include link-colors(#333,
a:visited {
color: #666666;
#999, #000, #666, #777);
}
a:focus {
}
color: #777777;
http://compass-style.org/reference/compass/typography/links/hover_link/
http://compass-style.org/reference/compass/typography/links/link_colors/ }
a:hover {
color: #999999;
リンクスタイルを設定できます。
}
link-colors では、$normal、$hover、$active、$visited、
a:active {
$focus の順に色を指定できます。
color: black;
}

182. Transi
tion
mns
Colu
Tables
この他にも便利なものがいっぱい。
どれを使うかはアナタ次第♪
決してあおる意味ではなくて「使いたいところだけ使う」。これが大事。
Help
e
rs
Sprites

183. 必要になった時に、リファレンスを見る｡
http://compass-style.org/reference/compass/
英語だけど、リファンレンスだし、問題ないっすよ！

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

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

186. ブラウザサポート設定の初期値
変数名
$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 ファイル内に定義して、デフォルト値を変更できます。

187. (*'-'*)

188. というわけで…

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

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

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

192. Prepros の使い方

193. プロジェクトの追加
プロジェクトの追加

194. プロジェクトの追加
プロジェクトの
フォルダを選ぶ

195. ファイルの一覧
プロジェクトが
追加された
Preprosが
処理できるファイルが
自動で一覧表示

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

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

198. 自動コンパイル
scssが更新されたら
自動でコンパイル
都度コンパイルボタンを押さなくてOK

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

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

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

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

203. プロジェクトツールバー
プロジェクト
ツールバー

204. プロジェクトツールバー
画像最適化
設定
削除
サーバー起動
FTP
リロード
※FTP機能は Prepros の PRO 版のみ。

205. プロジェクトツールバー
クリックしたら
WEBサーバーが起動
簡単にCSSやHTMLを確認できる！
自動リロードでCSS調整も便利！

206. プロジェクトの設定
ブラウザ自動リロード
ブラウザの自動リロードのON/OFFを設定できます。

207. プロジェクトの設定
CSSの出力先フォルダ
CSSファイルのデフォルトの出力先を指定します。

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

209. Sassにエラーがある時
ファイル、行番号、エラーの
内容などが表示される

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

211. 実践中...

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

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

214. Sass のメリット
‣
CSSの管理がシンプルに
●
●
‣
変数やミックスインで値やスタイル
に名前を付け、意味合いで管理
●
再利用しやすい
●
大きなプロジェクトほどに力を発揮
統一しやすい
●
‣
変数や計算の機能で、色やフォント
サイズ、レイアウトマージン等の統
一が容易になる
チームで作業する時も、Sassの定義
という形で、レギュレーションを共
有できる（変数名から意図を み取
る）
‣
インポートミックスイン機能を利用
することで、汎用的なスタイル（リ
セットCSS）やスタイルを、再利用
しやすい単位で管理できる
設計方針が変わる（大事）
●
●
●
変数、継承、ミックスインを使い、
意味合いを優先したCSSを書く事が
できるようになる
DOMコンテキストで変化するCSSの
既述性も向上する
結果、CSSの保守性とHTML上の既
述との兼ね合いでの悩みが激減する

215. Sass 導入の課題
‣
導入には関係者との調整が必要
●
●
●
●
●
●
お客様／制作チームの両方に
そもそもSass知らない人もい
る
●
コンパイルできる環境ばかり
でもない
チームメンバーが使っていな
い時、使ってもらえるか？
お客様がメンテナンスする場
合、お客様で対応できるか？
‣
使ってもらえるにしてもどこ
まで？（高度な機能も使え
る？）
LessやStylusといった、他の
CSSメタ言語派の人もいたり
します（特に問題なさそうだけれど）
CSSが大きくなる傾向が…
●
コンパイル後のCSSが大きく
なりやすい
●
対策の一つとして、ネストを浅
くするように設計するなど

216. 課題はあるけれど、
Sass を実際に使ってみると、
アナタはもう離れられないかも？
個人的には､普通のCSS書いたりすると「チッ、Sassじゃない…めんどくちゃい」とか思っ
たり、手が震えて書けないこともあったりして、なるべく採用できたらと思っています。

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

218. Sass導入の検討
‣
チーム内に未経験メンバーが居る
●
よほどでなければ乗り越えたい。
●
‣
もし、Sassを使ったことが無い人
がいても、使ってもらう良い機会
になる
お客様と
●
そもそもお客様先でCSSをメン
テナンスされるのか？
●
●
●
メンテしないならSassの採用を報
告する程度でも良いと思う
CSSをメンテされるなら、Sass
を使って頂けるかを確認。
●
使ってもらえるなら、第三者がメ
ンテナンスすることをより考慮し
た作りを心がける（普段から出来
てれば良いが、より考える）
CSSをメンテするが、Sassを使
っていな頂けない時は
●
●
Sassの導入を諦めるか…
【対策】お客様先で自由に改変で
きる空のCSSファイルを作成し
て、HTMLからLink。Sass由来の
CSSをオーバーライドしてもらう
感じで（弊害も多いと思うが…）

219. 制作のポイント
‣
CSSの設計はちゃんと考える
●
●
●
当然だけど、ちゃんとしたCSS の
設計がこれまでどおり必要なことは
変わらない
Sass を使うと、力技をスマートに
表現できる部分は増えるが、使い過
ぎると CSS を肥大化させるなどの
弊害もあるので注意
HTML のマークアップと CSS の保
守性を考えて利用していく
●
OOCSSなどの考え方も活用していく
‣
サイトの規則を明確に
●
●
●
●
変数､Mixin､ファイル構成などで､サ
イトの基本的な決まりごとを表現す
る
名前は、意味が分かり、かつ使い方
も想像できるように
あちこちのファイルを見ないでも、
サイトの規則が分かるように
例えば､「_config.scss」といった
ファイルを作り、サイトの基本規則
となる変数やMixinを集約する（１
カ所にある方が分かりやすいハズ）

220. 制作のポイント
‣
Sass 慣れしていないお客様/
メンバーがいる時は？
‣
過ぎない（とても大事）
●
●
同じツールを使う（サポート
しやすい）
ディレクトリ構成を簡単にす
る（Preprosなどでも簡単に
セットアップできるように）
高度な機能の利用は控える？
変数を作り過ぎない
●
mixinを作り過ぎない
●
●
●
ファイルを分け過ぎない
●
工夫し過ぎない
●
カッコつけ過ぎない
●
必要なものを必要に応じて追
加する
●
便利そうだからと作ったもの
は、あらかた忘れて使わない

221. 受け取り側の対応
（運用側の皆さんへのアドバイスです）
‣
技術的な不安は感じなくてOK
●
●
知らないMixinも修正するのは難
しくはない
使われているMixinの細かな仕様
は特に気にしないでOK
●
●
●
●
Compassならドキュメントある
カスタムMixinなら定義があるの
で見たらOK
追加や修正で分からない時は、
Sassの中に普通にCSS書ける
但し、CSSを書き換えるのはNG
‣
受け取ったら Sass の大まかな
構成（設計）を理解しておく
●
納品ファイルの大まかな構成、
各ファイルの意味合いなどを確
認する
●
詳細より外観
●
分からない部分は確認
●
もし構成が分かりにくいと思った
ら、制作者に趣旨を確認する（要
は、分からない人が見る事に配慮
されているか？ 問題があると思っ
たら、分かりやすくまとめてもら
うようにお願いしてみる）

222. 受け取り側の対応
‣
Prepros でメンテナンスす
る場合
●
●
●
config.rb が同梱されている
か確認する
有れば、config.rb があるフ
ォルダをルートにして
Prepros にプロジェクト登
録
無ければ、次のディレクトリ
を指定してPrepros にプロ
ジェクト登録
●
●
webroot に Sass フォルダが
含まれていたらwebroot をプ
ロジェクト登録
あるいは、webroot と sass
フォルダの両方を含むフォル
ダをプロジェクト登録
●
●
ここがややこしくなるので、制
作側はディレクトリ構成を単純
にしてあると良いハズ

223. (*'-'*)

224. …ということで、

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

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

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

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

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

230. HTML 側もよりスマートに書けたり。
ここら辺は OOCSS などとのパラダイムと合わせて考えたいですが。

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

232. 結局 Sass というツールは、

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

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

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

236. ただ…

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

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

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

240. (*'-'*)

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

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