Sassチートシート

## 概要
- sass = cssのメタ言語(CSSを生成するための言語)
- sassの構文にはsassとscssがある
	- sass = オリジナル、インデントが構文に含まれる、現在主流でない
	- scss = cssがそのまま動く、現在の主流

## 導入
gemパッケージとしてインストールする

```bash
# インストール
$ gem install sass

# バージョン確認
$ sass -v
> Sass 3.4.22 (Selective Steve)
```

## コマンド
- 基本的には`sass <INPUT.scss>:<OUTPUT.css>`の形式

	```bash
	# foo.scssからfoo.cssを生成
	$ sass foo.scss:foo.css
	```

- 生成後のCSSの形式は、`—style <STYLE>`で指定できる
	- スタイルは4種ある
		- `Nested`: SASSのインデント階層をそのまま残した形式(デフォルト)
		- `Expanded`: CSSの通常形式
		- `Compact`: 改行の除去
		- `Compressed`: さらに圧縮

	```bash
	$ sass foo.scss:foo.css —style expanded
	```

- `—line-comments`オプションで、scssの行位置を補足できる

	```bash
	$ sass foo.scss:foo.css —line-comments`

	> /* line 10, foo.scss */
	> #main {
	> …
	```

- `—watch` をつけると変更を監視してくれる

	```bash
	$ sass foo.scss:foo.css —watch

	# フォルダの指定も可能
	$ sass . —watch

	# フォルダを入出力別に指定することも可能
	$ sass sass:css —watch

	# エラー発生時に監視を停止
	$ sass . —watch —stop-on-error
	```

- sassは`.sass-cache`フォルダをキャシュ用に生成する
	- 変更するには`--cache-location`オプションを使う
	- `—no-cache`オプションでキャッシュを作成しないようにもできる

- sassコマンドはエイリアスとして__scssコマンド__としても使える

- `—debug-info`をつけると、cssにscssの元データ情報が挿入される
	- `-sass-debug-info`プロパティとして各セレクタに入る

## 構文
### ネスト
- セレクタをネストで指定できる

	```sass
	// sass
	#main{
		#inner{
			// …
		}
	}

	// css
	#main #inner{
		// …
	}
	```

- 子孫以外のセレクタである子(`>`)や隣接(`+`)もネスト指定可能

	```sass
	#main{
		> #inner{
		}
		+ #footer{
		}
	```

- `&`セレクタによって親を指定することが可能

	```sass
	#main{
		#outer & {
			// #outerの子の#mainにのみ作用する
		}
		&: hover{
			// #main:hoverに作用する
		}
	}
	```

- プロパティもネストできる

	```sass
	#main{
		border{
			top: 0px;
			bottom: 5px;
		}
	}
	```

### コメント
- 従来の複数行コメント(`/**/`)にくわえて1行コメント(`//`)が使える
	- ただし単行コメントはcss変換後に残らない
	- 複数行コメントはcompressedしない限りそのまま残る
		- ただし `/*! … */` とかくとcompressedでも残る

### 変数
- 変数は`$variable: value` の形式で制限できる

	```sass
	$red: #FF0000;
	```

- 変数のスコープは、定義位置によって変わる
	- セレクタの外で定義した場合は、対象のscssファイル全体
		- `@import`すれば読み込み先でも使える
	- セレクタ内で定義した場合は、そのセレクタの中のみ

- 変数は型を持つ

    型名 | リテラル
    --- | ---
    Number | 123, 1.23…
    Color | red, #f00, #FF0000, rgba(255, 0, 0, 1)…
    String | ‘foo’, “bar”, baz…
    Boolean | ture, false
    List | (a, b, c)…(括弧もカンマも必須でない)
    Null | null

- 変数をセレクタ名やURLとして使いたい場合は、`#{}`でインターポレイションを指定する

	```sass
	$sel = ‘.main’
	$url_base = ‘http://foobar.com/'
	
	#{$sel} {
		background: url(#{$url_base}img/baz.png);
	}
	```

### 演算
- 数値は四則演算が可能
	- 単位付きでも演算ができる
	- 単位が異なっていても、組み合わせによっては演算できる
		- OK: pxとcmなど
		- NG: ptとemなど
	- 除算を行う場合は構文上の制限で、括弧をつける必要がある
	- 演算に変数を使うことも当然できる

	```sass
	// 単位付きの計算
	height: 123px + 10px;

	// 除算の制限
	width: ($width / $all);
	```

- 色も演算可能

	```sass
	// 色と色の計算
	color: #000000 + #111111;		// = #111111

	// 色と数値の計算
	color: #000000 + 3;				// = #030303;
	```

- 文字列も結合が可能

	```sass
	content: $label + $message;
	```

### import
- 先頭がアンダースコアのscssファイルは、__パーシャル__として扱われる
	- パーシャルは、sassコマンドを実行してもcssが生成されない
	- パーシャルを`@import`することで、パーシャルを読み込み元と結合して出力できる

- sassの`@import`は、scssファイルをインポートすることができる
	- 拡張子は省略が可能
	- パーシャルの場合のアンダースコアも省略可能
	- 変換すると自動的に変換後のCSSファイルに置き換えられる

	```sass
	// module.scssあるいは_module.sassをインポート
	@import ‘module’
	```

- ファイルを複数指定することも可能
- セレクタの内部で`@import`することも可能(影響範囲をスコープを制限できる)


### 継承
- `@extend`を使うと、他のセレクタの定義を継承できる
	- 多重継承(複数のセレクタを継承すること)も可能
	-継承を連鎖させることも可能

	```sass
	#foo{
		// #fooの定義
	}
	#bar{
		@extend #foo;	// #fooの定義を継承できる
		// ここは#barの独自定義
	}
	```

- `%`を指定すると、継承専用のセレクタを作成できる

	```sass
	%forExtend{
		// …
	}
	#foo{
		@extend %forExtend;
	}
	```

### Mix-in
- Mix-in = あるセレクタに、別のセレクタを含めること
    - `@mixin`と`@include`をセットで使う

	```sass
	// scss
	@mixin base{
		// …
	}
	mixed1{
		@include base;
	}
	mixed1{
		@include base;
	}

	// css
	mixed1{
		// …
	}
	mixed2{
		// …
	}
	```

- `@mixin`は`@extend`に似ているが、生成後のcssが異なってくる

	```sass
	%base{
		// …
	}
	mixed1{
		@extend %base;
	}
	mixed2{
		@extend %base;
	}

	// css
	mixed1, mixed2{
		// …
	}
	```

- `@mixin`は、引数をとることができる

	```sass
	@mixin base($val1, $val2){
		border-color: $val1;
		font-color: bar: $val2;
	}

	#foo{
		@include base(#F00, #0F0);
	}
	```

- 引数はデフォルト指定も可能

	```sass
	@mixin base($val: #F00){
		border-color:$val;
	}

	#foo{
		@include base;
	}
	```

- 可変長引数を渡すことも可能

	```sass
	@mixin base($val…){
		text-shadow: $val;
	}
	```

- `@content`指定で、mixin側へ記述を渡すことも可能

	```sass
	@mixin base{
		@content
	}

	#foo{
		@include base{
			// …
		}
	}
	```

### 制御構文
#### if
- 比較演算子は概ね他言語と同じ
- 論理演算子は `and, or, not` と書く

    ```sass
    @if $val == ‘foo’{
        // …
    }@else if $some == 0 and $other == 1{
        // …
    }@else{
        // …
    }
    ```

#### for
- throughとtoで終了条件を変える

	```sass
	@for $i from 0 through 10{
		// 0から10まで実行
	}
	@for $i from 0 to 10{
		// 0から9まで実行
	}
	```

- 繰り返し内で変数を使うことが可能

	```sass
	// #item_1から#item_10を生成
	@for $i from 1 through 10{
		#item_#{$i}{
			// …
		}
	}
	```

#### while

```sass
$i: 0;
@while $i < 10{
	// 0~9
	$i: $i+1;
}
```
### each

```sass
$prefixes = a, b, c, d
@each $prefix in $prefixes{
	.content-#{$prefix}{
		background-image: url(#{prefix}.png);
	}
}
```

### 関数
#### ビルトイン関数

##### 数学系

関数名  | 内容
--- | ---
abs(num) | 絶対値
round(num) | 四捨五入
ceil(num) | 切り上げ
floor(num) | 切り捨て

##### 色系

関数名  | 内容
--- | ---
rgba(rgb, alpha) | RGBA型数値を指定する
lighten(color, percent) | 色を明るくする
darken(color, percent) | 色を暗くする
mix(color, other, percent) | 色の中間色を作成する

##### その他

関数名  | 内容
--- | ---
nth(list, index) | リストの要素を取得
type-of(val) | データ型を返す
quote(val) | 値をコーテーションする


#### 関数定義

```sass
@function foo($bar, $baz){
	@return $bar + $baz;
}
```

### デバッグ
- `@debug`と`@warn`はコンパイル時にメッセージを表示する

	```sass
	@debug ‘debug message’;
	@warn ‘warning message’;
	```