「bem」タグアーカイブ

Sass 始める時に参考にしたこと

投稿日時: 投稿者:
返信

▼ 設計手法について

設計手法については幾つかあるらしいですが，なんとなく主流は BEM と呼ばれるものらしい．

BEM

3つの要素を元に名前を設定する．
Block, Element, Modifier

Block__Element–Modifier
Block–Modifier

▼ Sass の表記

div タグの class 属性などは以下のように記述する．

class セレクタの始まりを「.」にする
id セレクタの始まりを「#」にする

▼ Sass 主な機能

& 親参照

以下の html と main.scss をビルドすると添付のような文字色で表示される.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./dist/css/main.css">
  <title>Document</title>
</head>
<body>
  <p>赤い文字</p>
  <p class="green">緑文字</p>
  <p><span class="blue">青い文字</span></p>
</body>
</html>
1
2
3
4
5
6
7
8
9

/* main.scss */
p {
  color: red;
  &.green {
    color: green;
  }
  .blue {
    color: blue;
  }

▼ mixin

@mixin で定義して，@include で適用する．

▼ インターポレーション(#{})

変数の参照

参考:
今更ながらBEMについてと、それに対応するSassについてまとめてみる
BEMをSassで快適に書く方法

▼ sass と scss の違いは？

記法のことを指していることが多く，scss 記法が CSS に近いルールで記述できる．
主流はこちらになっている．