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

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)。

ng new my-app --style scss

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

1. scssがどのようにインポートされているか

上記のオプションでプロジェクトを作ると、angular-cli.jsonでstyleがcssからscssに変わっていることがわかる。

angular-cli.json

{
...
"styles": [
        "styles.scss"
      ],
...
"defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

2. normalize.scssとsusyをinstall

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

yarn add normalize-scss
yarn add susy

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

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

{
"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を使ってみる

_import.scss

@import "../../node_modules/susy/sass/_susy.scss";

app.component.scss

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

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

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

5. breakpointをインポート

以上のような要領で、他のツールもどんどん追加していく

yarn add breakpoint-sass

_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
);

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

_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や各フレームワークが使用可能になる。