Haml/scssで文字の色や位置が反映されなかった時の対処事例

class名に%は必要なかった

hamlにもscssにもclass名を%header__messageと記入し、SCSSを使おうと思っていたが動かず立ち往生していた。

そこで%を取ってみると、動いた。

%header
  %header__message
    メッセージ

↓↓↓

%header
  .header__message
    メッセージ

header__message{
  text-align: center;
  color: $white;
  line-height: 2
}

↓↓↓

.header__message{
  text-align: center;
  color: $white;
  line-height: 2
}

headerやpには%が必要だがclassやdivには必要ないということでした。