Sass(SCSS) 入門超

1

レジュメ

Sass とは

Sass と SCSS

Sass の特徴

参考資料

2

Sass とは

3

メタ言語と言われるCSS の入力をサポートしてくれる

便利なもの。

4

Sass と SCSS

5

Sass(SCSS)

6

Sass ＝ SCSS

7

Sass の特徴

8

CSSとほぼ同じ書き方ができる。

入れ子で表現できる。

変数が使える。

計算ができる。

よく使うコードを定義できる。

関数が使える etc...

9

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

10

既存の CSS ファイルの拡張子を 「.scss」 に

変えるだけでOK！

11

入れ子で表現できる

12

CSSul { セレクタ：スタイル；}ul　li { セレクタ：スタイル；}ul　li　a { セレクタ：スタイル；}ul　li　a　img { セレクタ：スタイル；}

13

Sassul { セレクタ：スタイル； li { セレクタ：スタイル； a { セレクタ：スタイル； img { セレクタ：スタイル； } } }}

14

CSSa {　　セレクタ：スタイル；}a : hover {　　セレクタ：スタイル；}

15

Sassa {　　セレクタ：スタイル；

　　& : hover {　　　　セレクタ：スタイル；}

16

変数が使える

17

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

18

計算ができる

19

$pageWidth : 960px;$column : 3;

.column {　　width : ($pageWidth / $column);}

20

$pageWidth : 960px;$margin : 10px;$padding : 5px;

.column {　　width : ($pageWidth - $margin * 2 - $padding * 2);}

21

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

22

@mixin clearFix {　　position : relative;　　overflow : hidden;　　zoom : 1;}

定義する

23

.container {　　@include clearFix;}

使う時は

24

@mixin borderBox( $width, $style, $color ) {　　display : block;　　padding : 5px;　　border : $width $style $color;}

引数が使える

25

@mixin borderBox( $width : 1px, $style : solid, $color : #333333 ) {　　display : block;　　padding : 5px;　　border : $width $style $color;}

初期値を指定できる

26

.box {　　@include borderBox( 2px, dotted, #CCCCCC );}

使う時は

27

関数が使える

28

mix( #F00, #00F )　　 // 中間色lighten( #666, 30% )　// 明るくdarken( #666, 30% ) // 暗く

関数いろいろ

29

カスタム関数も使える

30

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

関数の定義

31

参考資料

32

ドットインストールhttp://dotinstall.com/

クリエイターボックスhttp://www.webcreatorbox.com/tech/css-sass/

WP-Dhttp://wp-d.org/2013/01/03/1732/

33