SASS(SCSS)とBEMのお話

11532 ワード
Sass scss bem Sass テキストリンク

言いたいこと

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

sass、scssとは

  • CSSのアレなところを何とかしようという目的で作成されたメタ言語
  • Syntactically(構文が) Awesome(イケてる) Style Sheets　の略
  • ネスト、変数、ミックスイン、セレクタ継承な便利な拡張を使うことができるようになる
  • SCSS（Sassy CSS）構文型と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記法と合わせて使用する例が多い

SCSSのメリットと使用例

メリット

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

使用例

今まで、こんな感じで書いてたけど、、、

.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;
}

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

//色を変数化
$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/
block {}
block__element {}
block__element--modifier {}

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

イメージ

活用事例

See the Pen BEM by Tadatsugu Sampei (@tadatsugu-sampei) on CodePen. 


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

参照