2013年1月11日に行った社内勉強会用スライド。『初めてのSass』的な内容です。

1. 2013.01.11 AC.tech Toshiaki Sasaki(Web designer at All Connect, Inc.)

3. Sass
こわくないよ

4. Agenda
- Sass?
- 記法
- 導入について
- まとめ

5. Sass ?

6. Sass is CSS Preprocessor
- CSSを拡張するメタ言語
“
メタ言語とは、ある言語について何らかの記述をするための言語である。
それだけでは具体的な利用に関する目的をもっておらず、特定のルールを加える
ことで具体的な応用として利用可能となる。 -Wikipedia
- CSSを普通に書くよりも効率良く
書くことができる

8. CSSの文法 だけを拡張する
http://hail2u.net/documents/sass-and-sassy-css.html

9. Why CSS Preprocessor?
- 効率的なCSSコーディング
- 表示速度向上のアプローチ

10. How to Coding

11. Nesting Nesting
入れ子でCSSを書ける
• Sample & Demo
style.scss style.css
#main { #main {
margin: 0; margin: 0;
padding: 0; padding: 0;
.block { }
background: #ccc;
color: #f00; #main .block {
font-size: 12px; background: #ccc;
} color: #f00;
} font-size: 12px;
}

12. Valiables Nesting
変数を使うことができる
• Sample & Demo
style.scss style.css
$margin-top: 40px; .sectionA {
$fontsize12: 12px; margin-top: 40px;
}
.sectionA {
margin-top: $margin-top; .sectionB {
} margin-top: 40px;
.sectionB { font-size: 12px;
margin-top: $margin-top; }
font-size: $fontsize12;
}

13. mixin Nesting
includeできる（セットを変数化するイメージ）
• Sample & Demo
style.scss style.css
@mixin sprite { .sprite-link {
display: block; display: block;
text-indent: -9999px; text-indent: -9999px;
} width: 300px;
height: 100px;
.sprite-link { background: #eee;
@include sprite; }
width: 300px;
height: 100px;
background: #eee;
}

14. mixin Nesting
includeできる（セットを変数化するイメージ）
• Sample & Demo
style.scss style.css
@mixin radius($value) { .sprite-link {
-webkit-border-radius: $value; -webkit-border-radius: 8px;
-moz-border-radius: $value; -moz-border-radius: 8px;
border-radius: $value; border-radius: 8px;
} background: #eee;
}
.sprite-link {
@include radius(8px);
background: #eee;
}

15. extend Nesting
セレクタの継承（再利用）
• Sample & Demo
style.scss style.css
.box { .box, .sectionA {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #eee; background: #eee;
} }
.sectionA{
@extend .box;
}

16. Other 演算できる Nesting
• Sample & Demo
style.scss style.css
#main { #main {
width: 940px - 40px; width: 900px;
margin: 0; margin: 0;
padding: 0 20px; padding: 0 20px;
} }

17. Coding is fun, again.
Nesting Valiables mixin
extend others

18. @import ファイルの結合 Nesting
style.scss
@import "common";
@import "reset";
複数の scss ファイルを読み込み、1つの css ファイルとして書き出す
_common.scss _reset.scss style.scss style.css

19. @import ファイルの結合 Nesting
style.scss
@import "common";
@import "reset";
読み込ませる scss ファイルには、css ファイルとして書き出させない
ためアンダーバーをつける（ex. _common.scss、_reset.scss
_common.scss _reset.scss style.scss style.css

20. compressed 圧縮Nesting
• Sample & compressed --watch sass:css
$ sass --style Demo
style.scss
#main {margin: 0;padding: 0;} #main .block {background:
#ccc;color: #f00;font-size: 12px;}.sprite-link {display:
block;text-indent: -9999px;width: 300px;height:
100px;background: #eee;}
改行やスペースを削除して1行ですべてを書き出す

21. good performance, good UX
@import compressed

22. Install

23. 環境用意しないと使えないよ
┐(́ ｀)┌ﾔﾚﾔﾚ

24. Install
- Ruby
- Sass

25. Install
- Ruby ← Mac OS だと最初から入ってる
- Sass

26. fo
rW
in
do
w
s
http://rubyinstaller.org/

27. http://sass-lang.com/

28. $ gem install sass

29. Install
- Ruby
- Sass
- Compass ← New!

30. http://compass-style.org/

31. $ gem update --system
$ gem install compass

32. OK!Next!

33. Compile

34. .scss .css
css ファイルを作るためには scss ファイルをコンパイルする

35. $ cd project_dir ← プロジェクトのフォルダへ移動
$ sass --watch scss:css ← 監視コマンド
sass フォルダ内の .scss ファイルを編集すると
css フォルダへ編集した内容を反映させた css ファイルができる

36. めんどくさい (´・ω・｀)

37. $ cd project_dir ← プロジェクトのフォルダへ移動
$ compass w ← 監視コマンド
sass フォルダ内の .scss ファイルを編集すると
css フォルダへ編集した内容を反映させた css ファイルができる

38. うん、めんどくさい (´・ω・｀)

39. そもそも黒い画面が... (´・ω:;.:...

40. まぁまぁ、そんなこと言わずに...

41. fo
rW
in
batch file Nesting do
w
s
• Samplewatch
compass & Demo
上記を書いて「compass_start.bat」という名前で保存。
sass フォルダと同じ階層に置いておく。
scss ファイルを編集する前に、compass_start.bat ファイルを
ダブルクリックすることで、自動的に監視が始まる。
コマンドプロンプトを起動して、監視コマンドを自分で入力しなくてもよ
くなるので楽だね :)

42. config.rb Nesting
• Sample=& Demo
http_path "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "image"
javascripts_dir = "js"
output_style = :compressed
relative_assets = true
line_comments = false
設定用の config.rb も同じ階層に置いておく

43. http://incident57.com/codekit/

44. http://mhs.github.com/scout-app/

45. 最初から言え
( ‘д‘⊂彡☆))Д´) ﾊﾟｰﾝ

46. コマンドに慣れておくと、なにかと良いかもね

47. for Non Sasser
- 別の css ファイル作って読み込む
<link rel=”stylesheet” href=”css/style.css” />
<link rel=”stylesheet” href=”css/newcontents.css” />

48. まとめ

49. - Sass で効率的かつ、表示速度向上を
意識したコーディングをしよう
- 大丈夫、すぐ慣れる :)
まずは Nesting とか、すぐできること
から始めよう

50. Enjoy coding!

51. Thank you.
Toshiaki Sasaki
@shirokuro331

52. Resources Nesting
Sassを覚えよう
http://css-happylife.com/archives/sass/
• Sample & Demo
SassをWindowsにインストールする
http://taiju.hatenablog.com/entry/20110607/1307413721
Sassられ指南
http://www.slideshare.net/taiju/sass-8218412
Compassを使ってSassのCSS出力を手軽にしよう
http://www.skyward-design.net/blog/archives/000118.html
Sass徹底解説∼SassがもたらすCSSのパラダイムシフト
http://cssnite.jp/afterdark/cpi/vol01/
Photo Credit
Luc Viatour
http://www.lucnix.be/main.php