[ Angular4 ] scssを使う(+ susy + breakpoint + compass) 

## Requirements

- angular version 4.x
- angular-cli 1.0.0
- node 7.10.0
- npm 4.5.0

## 0. ng new

最近、パッケージ管理にyarnを使うようになった。もちろん従来通りnpmでもOK。
ちなみに最近のブログによると、angular開発チームはyarnを使った方がいいよ、と推奨してる。ご参考までに([Development Environment Best Practices With Yarn](http://blog.angular-university.io/getting-started-with-angular-setup-a-development-environment-with-yarn-the-angular-cli-setup-an-ide/))。


```
ng new my-app --style scss
```

- `ng new`するときにオプションでスタイルにscss(sassも指定可)を指定しておくと便利。
- `sass-loader`と`node-sass`が自動でインストールされる


## 1. scssがどのようにインポートされているか
上記のオプションでプロジェクトを作ると、angular-cli.jsonでstyleが`css`から`scss`に変わっていることがわかる。

```json:angular-cli.json
{
...
"styles": [
        "styles.scss"
      ],
...
"defaults": {
    "styleExt": "scss",
    "component": {}
  }
}
```

## 2. normalize.scssとsusyをinstall
scssのmixinとかを自力で1から作ることはあまりないと思う。大抵はsusyなどのフレームワークを使うことになる。
今回の例では、グリッドレイアウト用にsusyを、モバイルサイト対応のためbreakpointを、そして汎用的なデザインのためcompassを利用する。とてもベーシックな構成。

```bash
yarn add normalize-scss
yarn add susy
```

- 上記のようにnormalize.scssとsusyをインポートする

下記のようにインポートしたnormalize.scssをangular-cli.jsonのstylesという箇所に追記しておく。

```json
{
"styles": [
        "../node_modules/normalize-scss/sass/_normalize.scss",
        "styles.scss"
      ],
}
```

## 3. import.scssファイルを用意してsusyをimport

- angularではcomponent間でスタイルの継承が行われないため、componentごとにimportの設定をする必要がある。煩雑さを省くために下記のようにすると良い、らしい。

```
1. src直下にstylesなどのわかりやすい名前のディレクトリを作る。
2. そのディレクトリに_import.scssなどという名前でimport関連の設定をまとめるファイルを作成。

src
├── app
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.ts
│   └── app.module.ts
│ 
├── styles
│   ├── _import.scss
│   ├── _mixins.scss
│   ├── _variables.scss

```

## 4. susyを使ってみる

```js:_import.scss
@import "../../node_modules/susy/sass/_susy.scss";
```

```js:app.component.scss
@import "../styles/_import.scss";

.container {
　　@include container(1140px);
}
```

- importファイルでsusyをインポートしておき、このimportファイルを各コンポーネントのscssファイルで適宜インポートする。
- これで例えばsusyのcontainer()ミックスインを使える

## 5. breakpointをインポート
以上のような要領で、他のツールもどんどん追加していく

```
yarn add breakpoint-sass
```

```js:_import.scss
@import "../../node_modules/susy/sass/_susy.scss";
@import "../../node_modules/breakpoint-sass/stylesheets/_breakpoint.scss";

$susy: (
  columns: 16,
  // debug: (image: show),
  global-box-sizing: border-sizing
);
```

```js:app.component.scss
@import "../styles/_import.scss";

.container {
　　@include container(1140px);
}

.main {
	height: 80vh;

	@include breakpoint(720px) {
		@include span(10 of 16);
	}
}
```

- 基本的なグローバルレイアウト(カラム数の指定など)をimportファイルに書いた。(おそらく別ファイルで書いてからimportファイルでインポートするのがベストプラクティスだと思うけど)
- これでimportファイルをインポートする全てのコンポーネントにこの設定が反映される。
- yarnでbreakpointをインストールして、それをimportファイルに追記する
- これで`breakpoint()`メディアクエリを使えるようになる

## 6. compassをインポート
同様にcompassをプロジェクトに加える

```
yarn add compass-mixins
```

```js:_import.scss
@import "../../node_modules/susy/sass/_susy.scss";
@import "../../node_modules/breakpoint-sass/stylesheets/_breakpoint.scss";
@import "../../node_modules/compass-mixins/lib/_compass.scss";

@import "./_variables.scss";

$susy: (
　columns: 16,
  // debug: (image: show),
  global-box-sizing: border-sizing
);
```
- 適宜stylesディレクトリに変数用のファイル(_variables.scss)などを用意し、変数はまとめてそこに書くなどする
- これでcompassのミックスインも使用可能になる

## 7. componentごとに分けてscssを利用
上記の例ではapp.component.scssだけを使っていたが、複数のコンポーネントでも同じように

```
@import "../styles/_import.scss";
```

の一行を入れることで各コンポーネントでもscssや各フレームワークが使用可能になる。