More than 1 year has passed since last update.

SASS(SCSS)とBEMのお話

Last updated at 2022-03-29Posted at 2019-09-28

言いたいこと

今更ながら、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のメリットと使用例

メリット

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

参照

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up