学習[54]日目：haml、sass、BEMの復習
本日の学習内容
BEM
Sass
Haml
BEM
前回学習した内容ではありますが、実際に書き出してみた時にここってどうなんだろうという点が何箇所かあったのでそちらに関してまとめていきたいと思います。
以前に学習したBEMですが、自分が記述していた際に以下のようになってしまった際にエレメントの子にエレメントのような記述をしてしまったのでこのような記述でいいのかと思い、再度復習しました。
＃ブロック__エレメント__エレメントみたいになってしまった。。
n.left-headder
%ul.left-headder__menu
%li.left-headder__menu__new-group
%li.left-headder__menu__edit-group
これに関しては、エレメントではなく以下のようにブロックの直下に置くような記述をしてあげるのが、望ましいようです。
.left-headder
%ul.left-headder__menu
%li.left-headder__new-group
%li.left-headder__edit-group
他にも注意するべき点がいろいろあるようでマルチクラスを使用した記述はしないことやルール上OKなものでも普通は使用しないというようりかは使用しないほうがいいルールもあるようなので記述していく上で調べながら実装していく必要性を感じた。
BEM一つとっても深いなーと感じた。
Sass
●書き方に関して
記述に関しては、ほとんどcssと同じだと感じたsass(.scss拡張子にて)ですが、＆とネストを混同しておりました。
ネストはheaderでhタグやpタグとかにcssを適用させたい時にネストを使うことでheader hやheader pのようにいちいち定義することなくheaderを省略して記述出来るが、class等で指定した時にブロックの中のエレメントを指定する時には親要素をひっぱってくる&が必要になるっていう理解でいいのかな？
そのままネストだけでは反映されなかったし。
●mixin
例えばmixinでスタイルを定義できるので以下のように文字スタイルに関してまとめて設定したい場合には以下のように設定可能である。
@mixin font-option($font-size: 16px, $color: #ffffff, $font-weight: bold) {
font-size: $font-size;
color: $color;
font-weight: $font-weight;
}
.left-headder {
@include font-option(10px, #253141, 100);
}
引数を上記のように設定した場合には@includeにてスタイル定義語に引数として使用する値を入力してあげることで任意のスタイルを簡略して使用することが可能となる。
尚、変数を入れずに使用した場合には定義した引数が勝手に代入されるようになっているようです。
haml
hamlでの記述に関してはlink_toの使い方において手こずりました。
link_toに関してはrailsにてヘルパーメソッドとして習いましたが、これ一つをとっても色々な使用方法があり、勉強になりました。
font-awesomewoを利用してアイコンのリンクを作成する場合には、以下のように行いました。
=link_to "/messages", class: "left-headder__menu__btn" do
= fa_icon 'cog'
実際にこれがリンクとして生成されているのかが曖昧なので、あとで復習して理解を深めたいと思います。
参照：https://necomesi.jp/blog/tsmd/posts/152#class-naming
