2014年9月 第14回ゼロから始めるWordPress勉強会「Sass+Bootstrap+_sでテーマを作ろう」＆質問大会！ でのプレゼン資料です。 Sassを説明しました。 CSSを直接書くよりも、Sassを使って書いてほうが楽にかけて、効率的です。 Sassは最初は理解しにくいかもしれませんが、直ぐに慣れてくるので、だんだんと効率よくWebサイト制作ができるようになります。 初級者の方がでもわかりやすいようにまとめました。 初級者に薦めるなら、次の６つが便利な機能だと思います。 １．構文の階層化 ２．変数 ３．親セレクタ参照 　&（アンパサンド） ４．関数 ５．四則演算　＋、－、×、÷ ６．インターポレーション（差し込む、補間） 上記の６つの機能を使えるだけでも、かなり楽になります。 通常のCMSやホームページなどであれば、上記の６つの機能だけでも十分だと思います。 ★Windowsの場合は日本語に注意！ フォルダ名、ファイル名で日本語はNG　なので使わない。 [Decode error - output not utf-8]　のエラーがでた場合は、以下の記事が参考になります。 http://cappee.net/coding/sublime-scss-compass-emmet Invalid Windows-31J character “\xE3”　のエラーがでた場合は、以下の記事が参考になります。 http://frmmpgit.blog.fc2.com/blog-entry-34.html

1. Sassについてゼロから解説
Ticklecode.
Yoshinori Kobayashi 1
第14回ゼロから始めるWordPress勉強会14.09.17
-基本の理解だけでも効率アップ-

2. 生まれは奈良県です。
小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
2

3. 3
デモで全体的にご説明。

4. 4
Sassを使えるようにする

5. 5
SASS
Syntactically Awesome Stylesheets
http://sass-lang.com/

6. 6
ファイルの拡張子は.scss
Sassと呼ばれているが、.scssファイルに記述していく。

7. 7
.scss をコンパイルして.css を作る。
コンパイル（変換）して
.cssファイルをつくる。
コンパイルには、
Rubyが必要。

8. 8
Sass、Compassの設定手順まとめ
Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロード
の設定まとめ
http://cappee.net/coding/sublime-scss-compass-emmet
「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみた
のでその手順と参考にした記事まとめ
http://ozpa-h4.com/2013/03/05/compass-sass-scss-sublime-text/
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)
http://liginc.co.jp/web/html-css/css/56599

9. 9
なぜ、Sassなのか

10. 10
CSS の限界

11. 11
環境の変化
回線が早くなり、よりインタラクティブな環境へ。
そのため、Webサイトが高度化して、CSS記述量が増える。
様々なデバイスの登場により、直接のCSSへの
記述ではコントロールが難しい。
複数人での共同作業がデフォルトに。

12. 12
直接、CSSを書くことへの抵抗が大きくなった
同じ記述を繰り返し、書かなければならない。
CSS3の難易度が高い。
クラスブラウザの対応の記述が難しい
マルチデバイスの対応の記述が難しい

13. 13
SassのMyメリット

14. 14
プログラムとして記述できる。
⇒HTMLとCSSだけプログラムでない。
そこだけ、考え方が異なっていた。
Compassなどの強化ライブラリがあるので、
圧倒的に効率はあがる。
通常のCSSが使える。
⇒そのまま移行して、修正を開始できる。
⇒コンパイルで文法チェックをしてくれる。

15. 15
最初に覚えておきたい、Sass の６つ便利機能

16. 16
構文の階層化
.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded{
background: #333;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time {
background: #fff;
} CSS
.hentry {
.mejs-controls {
.mejs-time-rail {
.mejs-time-loaded {
background: #333;
}
.mejs-time{
background: #fff;
}
}
}
} Sass
同様のclassやidの
記述の回数がへる。
変更が容易!

17. 17
変数（一時的になにかを記憶）$変数名: （コロン）
$font_color: white;
.navbar-default {
color: $font_color;
}
Sass
.navbar-default {
color: white;
} CSS
カラーコード
margin値
padding値
font-family値
変数を変更するだけで
書き換えができる。

18. 18
親セレクタ参照&（アンパサンド）
.container ul li a{
color: white;
&:hover{
color: black;
}
} Sass
.container ul li a{
color: white;
}
.container ul li a:hover{
color: black;
} CSS
親セレクタの変更だけで、
まとめて変更される。

19. 便利な関数があらかじめ、
用意されているため、効
率がよい。
19
関数（なにかをもらって、なにかを返す）
$font_color: white;
.navbar-default{
color: darken($font_color,30%)
} Sass
.navbar-default{
color: #b3b3b3
} CSS
たくさんの関数が用意されている。
以下のURLの「Method List」参照
http://sass-lang.com/documentation/

20. 表現の幅が広がって、
柔軟になる。
20
四則演算＋、－、×、÷
$mwidth: 980px;
$mpadding: 5px;
article {
width: $mwidth - $mpadding * 2;
padding: $mpadding;
} Sass
article {
width: 970px;
padding: 5px;
} CSS
色コードの加減算
文字の連結（加算）もで
きる。

21. 21
インターポレーション（差し込む、補間）
$imgRootPath: ‘../images/’;
#main{
background: url(#{$imgRootPath}bg.png);
} Sass
#main {
background: url(../images/bg.png);
} CSS
通常は、変数が展開できないが、
強制的に変数の中身が評価される

22. 22
Windowsの場合は日本語に注意
[Decode error - output not utf-8] のエラーがでた場合
http://cappee.net/coding/sublime-scss-compass-emmet
フォルダ名、ファイル名で日本語はNG
Invalid Windows-31J character “xE3” のエラーがでた場合
http://frmmpgit.blog.fc2.com/blog-entry-34.html

23. 23
参考図書
Web制作者のためのSassの教科書
これからのWebデザインの現場で必須のCSSメ
タ言語
初級者から中級者向けの書籍です。
非常に見やすく、文章も丁寧でわかりやすいです。
後半は難易度が高いですが、前半部分だけを実施するだけでもかなり効率
化されます。

24. 24
まとめ
・初級者のときは、Sassで通常のCSSを書いてみる。
慣れたころに、Sassの機能を使いだす。
・通常のWebサイト制作であれば、今回紹介した
機能を使うだけでもかなり効率的になる。

25. 25
ご清聴、ありがとうございました。