Sass の超入門者向けのスライドです。

1. Sass(SCSS) 入門
超
1

2. レジュメ
Sass とは
Sass と SCSS
Sass の特徴
参考資料
2

3. Sass とは
3

4. メタ言語と言われる
CSS の入力をサポートしてくれる
便利なもの。
4

5. Sass と SCSS
5

6. Sass(SCSS)
6

7. Sass ＝ SCSS
7

8. Sass の特徴
8

9. CSSとほぼ同じ書き方ができる。
入れ子で表現できる。
変数が使える。
計算ができる。
よく使うコードを定義できる。
関数が使える etc...
9

10. CSSとほぼ同じ
書き方が出来る
10

11. 既存の CSS ファイルの
拡張子を 「.scss」 に
変えるだけでOK！
11

12. 入れ子で表現できる
12

13. CSS
ul {
セレクタ：スタイル；
}
ul li {
セレクタ：スタイル；
}
ul li a {
セレクタ：スタイル；
}
ul li a img {
セレクタ：スタイル；
}
13

14. Sass
ul {
セレクタ：スタイル；
li {
セレクタ：スタイル；
a {
セレクタ：スタイル；
img {
セレクタ：スタイル；
}
}
}
}
14

15. CSS
a {
セレクタ：スタイル；
}
a : hover {
セレクタ：スタイル；
}
15

16. Sass
a {
セレクタ：スタイル；
& : hover {
セレクタ：スタイル；
}
16

17. 変数が使える
17

18. $textColor : #333333;
$default-margin : 10px auto;
$default-style : underline;
18

19. 計算ができる
19

20. $pageWidth : 960px;
$column : 3;
.column {
width : ($pageWidth / $column);
}
20

21. $pageWidth : 960px;
$margin : 10px;
$padding : 5px;
.column {
width : ($pageWidth - $margin *
2 - $padding * 2);
}
21

22. よく使うコードを
テンプレ化できる
22

23. @mixin clearFix {
position : relative;
overflow : hidden;
zoom : 1;
}
定義する
23

24. .container {
@include clearFix;
}
使う時は
24

25. @mixin borderBox( $width, $style,
$color ) {
display : block;
padding : 5px;
border : $width $style $color;
}
引数が使える
25

26. @mixin borderBox( $width : 1px,
$style : solid, $color : #333333 ) {
display : block;
padding : 5px;
border : $width $style $color;
}
初期値を指定できる
26

27. .box {
@include
borderBox( 2px,
dotted,
#CCCCCC );
}
使う時は
27

28. 関数が使える
28

29. mix( #F00, #00F ) // 中間色
lighten( #666, 30% ) // 明るく
darken( #666, 30% ) // 暗く
関数いろいろ
29

30. カスタム関数も
使える
30

31. @function 関数名( 引数, 引数 ... ) {
：
処理
：
@return 戻り値;
}
関数の定義
31

32. 参考資料
32

33. ドットインストール
http://dotinstall.com/
クリエイターボックス
http://www.webcreatorbox.com/
tech/css-sass/
WP-D
http://wp-d.org/2013/01/03/1732/
33