前知識がない人のためのSassの始めかたです。

1. CSSの未来を先取り！
CSS Preprocessorの
始めかた
@adactio (CC BY2.0)

2. CSS
Preprocessor

3. CSS
Preprocessor

4. #main {
float: right;
}
#main p {
margin-bottom: 1em;
}

5. #main {
float: right;
}
#main p {
margin-bottom: 1em;
}

6. #main { #main {
float: right; float: right;
} p {
#main p { margin-bottom: 1em;
margin-bottom: 1em; }
} }

7. CSS
Preprocessor

8. CSS
Preprocessor

11. +

12. Variable
CSS Sprite
Nesting
+
Mixin
Vendor Prefix
extend

13. 一緒に使うので
いちいち覚えなくてもOK

14. Sass・Compassの
メリット

15. Variable
CSS Sprite
Nesting
+
Mixin
Vendor Prefix
extend

16. Variable
CSS Sprite
Nesting
+
Mixin
Vendor Prefix
extend

17. .box {
@include border-radius(5px);
}

18. .box {
@include border-radius(5px);
}
.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

19. Variable
CSS Sprite
Nesting
+
Mixin
Vendor Prefix
extend

20. Variable
CSS Sprite
Nesting
+
Mixin
Vendor Prefix
extend

21. #main { #main {
float: right; float: right;
} p {
#main p { margin-bottom: 1em;
margin-bottom: 1em; }
} }

22. 省力？
@epSos.de (CC BY 2.0)

23. まだまだ
@epSos.de (CC BY 2.0)

24. Sass
#main {
margin: 5px;
a {
text-decoration: none;
&.link {
display: inline-block;
}
&:hover {
color: #F00;
}
}
}

25. CSS
#main {
margin: 5px;
}
#main a {
text-decoration: none;
}
#main a.link {
display: inline-block;
}
#main a:hover {
color: #F00;
}

26. Sass
#main {
margin: 5px;
a {
text-decoration: none;
&.link {
display: inline-block;
}
&:hover {
color: #F00;
}
}
}

27. Sass
#main {
margin: 5px;
a {
text-decoration: none;
&.link {
display: inline-block;
}
&:hover {
color: #F00;
}
}
}

28. CSS
#main {
margin: 5px;
}
#main a {
text-decoration: none;
}
#main a.link {
display: inline-block;
}
#main a:hover {
color: #F00;
}

29. ZERGE_VIOLATOR (CC BY 2.0)

30. ZERGE_VIOLATOR (CC BY 2.0)
Media Queries

32. #main {
CSS
float: left;
width: 700px;
margin: 0 auto;
}
@media screen and (max-width: 640px) {
#main {
float: none;
width: 100%;
}
}

33. Sass
#main {
float: left;
width: 700px;
margin: 0 auto;
@media screen and (max-width:640px) {
float: none;
width: 100%;
}
}

34. #main {
CSS
float: left;
width: 700px;
margin: 0 auto;
}
@media screen and (max-width: 640px) {
#main {
float: none;
width: 100%;
}
}

35. #main {
CSS
float: left;
width: 700px;
margin: 0 auto;
}
@media screen and (max-width: 640px) {
#main {
float: none;
width: 100%;
}
}

36. Sass
#main {
float: left;
width: 700px;
margin: 0 auto;
@media screen and (max-width:640px) {
float: none;
width: 100%;
}
}

37. Sass
#main {
float: left;
width: 700px;
margin: 0 auto;
@media screen and (max-width:640px) {
float: none;
width: 100%;
}
}

38. Variable
CSS Sprite
Nesting
+
Mixin
Vendor Prefix
extend

39. Variable
CSS Sprite
Nesting
+
Mixin
Vendor Prefix
extend

40. photo by pakutaso.com

41. 座標・幅 ブラウザ
指定 キャッシュ
photo by pakutaso.com

42. 座標・幅 ブラウザ
指定 キャッシュ
めんどくさい。
photo by pakutaso.com

45. 読み込み

46. 読み込み
$share-sprite: sprite-map("share/*.png");
$share-sprite-url: sprite-url($share-sprite);
.logoArea {
text-indent: 100%;
overflow: hidden;
white-space: normal;
width: image-width(sprite-file($share-sprite,"logo"));
height: image-height(sprite-file($share-sprite,"logo"));
background-image: $share-sprite-url;
background-repeat: no-repeat;
background-position: sprite-position($share-sprite,"logo");
}

47. .logoArea {
text-indent: 100%;
overflow: hidden;
white-space: normal;
width: image-width(sprite-file($share-sprite,"logo"));
height: image-height(sprite-file($share-sprite,"logo"));
background-image: $share-sprite-url;
background-repeat: no-repeat;
background-position: sprite-position($share-sprite,"logo");
}

48. .logoArea {
text-indent: 100%;
overflow: hidden;
white-space: normal;
width: image-width(sprite-file($share-sprite,"logo"));
height: image-height(sprite-file($share-sprite,"logo"));
background-image: $share-sprite-url;
background-repeat: no-repeat;
background-position: sprite-position($share-sprite,"logo");
}
.logoArea {
text-indent: 100%;
overflow: hidden;
white-space: normal;
width: 419px;
height: 62px;
background-image: url('/img/share-s6664b1cfc3.png');
background-repeat: no-repeat;
background-position: 0 0;
}

49. .logoArea {
text-indent: 100%;
overflow: hidden;
white-space: normal;
width: image-width(sprite-file($share-sprite,"logo"));
height: image-height(sprite-file($share-sprite,"logo"));
background-image: $share-sprite-url;
background-repeat: no-repeat;
background-position: sprite-position($share-sprite,"logo");
}
.logoArea {
text-indent: 100%;
overflow: hidden;
white-space: normal;
width: 419px;
height: 62px;
background-image: url('/img/share-s6664b1cfc3.png');
background-repeat: no-repeat;
background-position: 0 0;
}

50. Variable
CSS Sprite
Nesting
+
Mixin
Vendor Prefix
extend

51. @import url(reset.css);
@import url(module.css);
@import url(style.css);
import.css
#main {
float: right;
}
#main p {
margin-bottom: 1em;
}

52. @import url(reset.css);
△
@import url(module.css);
@import url(style.css);
import.css
#main {
float: right;
}
#main p {
margin-bottom: 1em;
}

53. @import url(reset.css);
△
@import url(module.css);
@import url(style.css);
import.css
#main {↓
float: right;↓
....
}↓
#main p { ↓
margin-bottom: 1em;↓
....
}

54. @import url(reset.css);
△
@import url(module.css);
@import url(style.css);
import.css
#main {↓
float: right;↓
....
△
}↓
#main p { ↓
margin-bottom: 1em;↓
....
}

55. @import "reset";
@import "module";
@import "style";
import.scss
/*--- reset */
html {
overflow-y: scroll;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,
import.css
#header {
}

56. #main {↓
float: right;↓
....
}↓
#main p { ↓
margin-bottom: 1em;↓
....
}

57. #main {↓
float: right;↓
....
}↓
#main p { ↓
margin-bottom: 1em;↓
....
}
$compass compile -s compressed style.scss

58. #main {↓
float: right;↓
....
}↓
#main p { ↓
margin-bottom: 1em;↓
....
}
$compass compile -s compressed style.scss

59. #main {↓
float: right;↓
....
}↓
#main p { ↓
margin-bottom: 1em;↓
....
}
$compass compile -s compressed style.scss
#main{float:right;}#main p{margin-bottom:1em;}

60. @flickrized (CC BY 2.0)
Try it!

61. × お試しなので、
コマンドプロンプトは使いません

63. インストーラーをダウンロード
Scout - Compass and Sass without all the hassle
http://mhs.github.com/scout-app/

64. インストーラーをダウンロード

65. インストーラーに従って
進むだけ

71. Input Folder
Sassファイルのディレクトリ

72. Input Folder
Sassファイルのディレクトリ
Output Folder
CSSファイルのディレクトリ

73. site_data
Input Folder
_scss
style.scss
Output Folder
css
style.css

76. Images Folder
画像フォルダー（Sprite時）

77. Images Folder
画像フォルダー（Sprite時）
Output Style
書き出しスタイル
Nested 入れ子で
Expanded よく書く感じの
Compact 1行スタイル
Compressed 改行スペース削除

78. Nested
#main {
width: 700px;
float: left; }
#main p {
margin: 5px; }

79. Expanded
#main {
width: 700px;
float: left;
}
#main p {
margin: 5px;
}

80. Compact
#main { width: 700px; float: left; }
#main p { margin: 5px; }

81. Compressed
#main{width:700px;float:left}#main p{margin:5px}

82. ファイル
可読性
サイズ
高 大
Nested 入れ子で
Expanded よく書く感じの
Compact 1行スタイル
Compressed 改行スペース削除
低 低

83. ファイル
可読性
サイズ
高 大
Nested 入れ子で
Expanded よく書く感じの
Compact 1行スタイル
Compressed 改行スペース削除
低 低

84. ファイル
可読性
サイズ
高 大
Nested 作業中
入れ子で
Expanded よく書く感じの
Compact 1行スタイル
Compressed 改行スペース削除
低 低
リリース時

85. Images Folder
画像フォルダー（Sprite時）
Output Style
書き出しスタイル
Nested 入れ子で
Expanded よく書く感じの
Compact 1行スタイル
Compressed 改行スペース削除

88. style.scss

89. style.scss

90. style.scss style.css

91. ×
style.scss style.css

92. site_data
_scss
style.scss
css

93. site_data
_scss
style.scss
css

94. site_data
_scss 保存
style.scss
css
style.css

95. Try!
Try!
@Camera Eye Photography (CC BY 2.0)
Try!

96. ま ず は 、 を 作って、
のコ ピー
イト
既存のサ
実 験 ！
の 中 で
そ

97. Sassのあるある
Sassのあるある
@erix! (CC BY 2.0)

100. >>> Change detected at 16:05:43 to: style.scss
error style.scss (Line 6: Undefined mixin
'border-radius'.)
overwrite style.css
この前後が
あやしい

102. CSS3のベンダープリフィックスには、
Compassをインポートします

108. この前後が
あやしい
>>> Change detected at 16:41:11 to: style.scss
error style.scss (Line 4: Invalid CSS after " /
zoom": expected ///, was ":1;")
overwrite style.css

110. プロパティの前に「/」があると
エラーを返します

115. まとめ

116. 最初は
@mikebaird (CC BY 2.0)
難しい

117. 慣れたら
最強
@mikebaird (CC BY 2.0)

118. CSSの文法が正しければコンパイルOK
IE用ハックを書き換えるぐらい
既存のCSSをScoutに通してエラーを
一つ一つ潰す

119. Try!
Try!
@Camera Eye Photography (CC BY 2.0)
Try!

120. ま ず は 、 を 作って、
のコ ピー
イト
既存のサ
実 験 ！
の 中 で
そ

121. @owenwbrown (CC BY 2.0)

122. 参考ページ

123. 【Sassを覚えよう！】もくじ的なのと参考リンク - CSS HappyLife
http://css-happylife.com/archives/2012/0130_0415.php

124. DreamweaverでSassファイルを編集するには？ ¦ Webデザインのタネ
http://oshare.jugem.cc/?eid=795