備忘録_scss再入門


scssに関して「なんとなくの部分」を文書化して知識整理
※自分用なので@mixinとか@extendは省いています

## 文字コードの指定

コメントを日本語で記述する場合があるのでscssファイルを作成する際には先頭に文字コードを記述
※scssファイルに日本語を使用していない場合、文字コードが省略された形でcssファイルにビルドされる

```サンプル
@charset "UTF-8"
```

## コメントアウト

scssファイル内に記述できるコメントアウトに関して下記を参照

```サンプル
// => 1行コメント(ビルド後に削除される)

/* ~ */ => 通常コメント(ビルド後もコメントとして残る)

/*! ~ */ => 圧縮したcssファイルにもコメントとして残したい際に使用する
```

## 親要素を参照する

scssでは「&」を使用して親要素を参照できる

```サンプル1
//scss
.test {
	color: red;
	
	a & {
		color: blue;
	}
}

//css
.test {
	color: red;
}

a .test {
	color: blue;
}
```

```サンプル2
//scss
button {

	&.red {
	}
	
	&.blue {
	}
	
	&.green {
	}
}

//css
button {
}

button.red {
}

button.blue {
}

button.green {
}
```

```サンプル3
//scss
a {
	color: red;
	
	&:hover {
		color: blue;
	}
}

//css
a {
	color: red;
}

a:hover {
	color: blue;
}
```

## 変数定義に関して

変数の定義方法は下記

```
$変数名: 値;
```

### リスト型の変数定義

下記のような変数定義も可能

```
// 複数の値を指定
$base_padding: 8px 16px 4px;

// fontの指定
$font_gothic: "Hiragino kaku Gothic ProN", Meiryo; 
$font_mincho: "Hiragino Mincho ProN", "MS PMincho";
```

### 変数定義の際の注意点

scssの変数定義に関して下記の2つは同じものとして扱われる

```
$font-color: red;

$font_color: red;
```

要するに`-`と`_`が同じ文字として認識されてしまう

## 変数に文字列を格納する場合

変数に文字列を格納する場合

```サンプル1
// 引用符で囲まない場合 => ビルド後は、testという文字列で出力される
$a: test;

// 引用符で囲んだ場合  => ビルド後は、"test"という文字列で出力される
$b: "test";

// 下記の場合は / などが入っているため引用符で囲まないとエラーになる
$c: "http://test.com/"
```

## インターポレーションについて

以下の場合においてインターポレーションによる記述が必要

- 変数の前後に続けて文字列を記述
- 変数に定義した値の引用符を削除して出力したい場合

インターポレーションの記述は下記

```
#{ 変数 }
```

下記のサンプル用に変数を使用したい場合は引用符を削除して出力しないともろもろエラーになるのでインターポレーションを使用する

```サンプル
$path: "../img/icon/";

.test_1 {
	background-image: url(#{path}box.png)
}
.test_2 {
	background-image: url(#{path}book.png)
}
.test_3 {
	background-image: url(#{path}flag.png)
}
```

## scssとメディアクエリー

### メディアクエリーの記述方法

scssでも下記のように記述可能

```サンプル
// cssと共通
@media only screen and (min-width: 780px) {

}
```

### メディアクエリーのネスト

scssではメディアクエリーのネストも簡単

```サンプル
// scss
body {
	background-color: red;
	
	@media only screen and (min-width: 780px) {
		background-color: blue;
	}
}

// css
body {
	background-color: red;
}

@media only screen and (min-width: 780px) {

	body {
		background-color: blue;
	}
}
```

### 変数とメディアクエリー

下記のように記述することも可能
※インターポレーションを使用することを忘れない

```
// 変数定義
$s: "only screen and (max-width: 400px)";
$m: "only screen and (min-width: 401px)";

@media #{$s} {

	body {
		background-color: red;
	}
}

@media #{$m} {

	body {
		background-color: blue;
	}
}
```

## scssのインポート機能

scssは`@import`を使用することでscssファイルのインポートが可能になる
※scssのインポート機能を使用してインポートする場合、cssファイルは1つに結合されて出力される

```
// インポートの記述
@import "ファイル名";　=> ファイルに関しては相対パスで記述する 
```

### 補足

scssのインポート機能を利用する場合、拡張子`.scss`は省略してもOK

## パーシャルファイル

パーシャルファイルとは、自動的にcssに変換されないファイルのこと
※パーシャルファイルはファイル名の先頭に`_`を使用する

```
// ファイル名
_test.scss
```

### 補足

scssではパーシャルファイルを読み込む際には`_`をつけなくても読み込まれるが基本的には省略しないで記述するのがベター

## mapの利用(Sass3.3から追加された機能)

mapとはkeyとvalueのペアを定義できる機能
呼び出しは下記のようにする

```
// map-get()を使用
map-get($map, $key)
```

下記のように記述することが可能

```サンプル
//scss
$map: (
    key1: 10px,
    key2: 20px,
);
 
.map {
    margin: map-get($map, key1);
}

//css
.map {
	margin: 10px;
}
```

その他の使い方に関して下記のページを参考にさせていただいた
http://qiita.com/manabuyasuda/items/ae42db5604cd723fb3cd
http://qiita.com/manabuyasuda/items/caa823d3644cf3672d05


## scssでフォントを読み込む際のテクニック

下記のページを参考にさせていただたいた
http://qiita.com/Yama-to/items/324a691c7989c4185275