SASS(SCSS)とBEMのお話

# 言いたいこと
今更ながら、CSSを便利に活用する為にSCSSとBEM記法を活用してみよう

# sass、scssとは
- CSSのアレなところを何とかしようという目的で作成されたメタ言語
- Syntactically(構文が) Awesome(イケてる) Style Sheets　の略
- ネスト、変数、ミックスイン、セレクタ継承な便利な拡張を使うことができるようになる
- SCSS（Sassy CSS）構文型とSASS構文型がある

```sass
//CSS
.btn {
  display: block;
}
.btn span {
  display: inline-block;
}

//SASS
.btn
  display: block
  span
    display: inline-block

//SCSS
.btn {
  display: block;
  span {
    display: inline-block;
  }
}
```

# 最近のトレンド
- SCSSとSASSがあるが、SCSSがメジャー
- BEM記法と合わせて使用する例が多い

![ダウンロード.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63060/7a81183a-a4fa-55c2-4668-a62a53888d76.jpeg)

# SCSSのメリットと使用例

### メリット
- ネストが出来るのでセレクタ構造がわかりやすい
- 変数が使えるので、定義を厳格化＆メンテしやすくなる
- 継承と拡張が出来るのでコードを少なく出来る&わかりやすい
- ファイルを分割できる(コンパイルすると1ファイルになる)

### 使用例
今まで、こんな感じで書いてたけど、、、

```css
.primaryBtn {
  padding: 12px;
  color: #fff;
  background-color: #01a2c1;
}

.dangerBtn {
  padding: 12px;
  color: #fff;
  background-color: #fc0349;
}

.primaryBtn--big {
  padding: 12px;
  color: #fff;
  background-color: #01a2c1;
  font-size: 30px;
}

```

こんな感じに便利にかける！

```SCSS
//色を変数化
$primary: #01a2c1;
$danger: #fc0349;
$white: #fff;

@mixin btn {
  padding: 12px;
  color: $white;
}

.primaryBtn {
  @include btn;
  background-color: $primary;
}

.dangerBtn {
  @include btn;
  background-color: $danger;
}

.primaryBtn__big {
  @extend .primaryBtn;  // 既存のクラスを呼び出し
  font-size: 30px;     // ここだけ変更
}
```

> 参照：SCSSを試してみよう
> https://www.sassmeister.com/

> 参照：SCSSで出来ることまとめ
> https://qiita.com/TD3P/items/24a4773edf0c2fa48aea

# BEMとは
- Block Element Modifier の略
- 3つの要素を使ってHTMLにクラス名をつける記法
- Blockはsectionとかarticleのような要素の集合単位
- ElementはBlockの中にあるボタンとかテキストの集合単位
- ModifierはElementのバリエーション(スライム、ぶちスライム、ホイミスライム)
- https://en.bem.info/

```SCSS
block {}
block__element {}
block__element--modifier {}

monster {}
monster__slime {}
monster__slime--ぶち {}
monster__slime--ホイミ {}
```

### イメージ
<img width="864" alt="スクリーンショット 2019-09-29 0.58.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63060/d35e5618-c3a9-1c07-db9c-0139b85630d6.png">



# 活用事例

<p class="codepen" data-height="661" data-theme-id="dark" data-default-tab="result" data-user="tadatsugu-sampei" data-slug-hash="VwZOPoJ" style="height: 661px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="BEM">
  <span>See the Pen <a href="https://codepen.io/tadatsugu-sampei/pen/VwZOPoJ">
  BEM</a> by Tadatsugu Sampei (<a href="https://codepen.io/tadatsugu-sampei">@tadatsugu-sampei</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```html

<body>
  <section class="main">
    <div class="main__textArea">
      <p>Hello! SCSS&BEM!</p>
    </div>
    <div class="main__btn--success">
      早速使ってみる
    </div>
    <div class="main__btn--faile">
      遠慮しておく
    </div>
  </section>
</body>

<style>

@mixin btn {
  text-align: center;
  margin: 20px 40px;
  padding: 20px;
  color: #fff;
}

.main{
  background-color: #c2ffea;
  padding: 100px;
  &__textArea {
    text-align: center;
    margin: 40px;
    padding: 40px;
    background-color: #fff; 
  }
  &__btn{
    &--success {
      @include btn;
      background-color: #0a7bf5;
    }
    &--faile {
      @include btn;
      background-color: #808080;
    }
  }
}

</style>
```

# 参照
- [BEM設計]うわああああ三(卍^o^)卍ってならないBEMの書き方をワイヤーフレーム使って整理するぞ
    - https://qiita.com/mame_hashbill/items/bf541f795533b40e3cdc
- https://www.evoworx.co.jp/blog/sass-study/
-