mixinでコンテキストの記述
mixin content
ここでいうコンテキストとは
code: scss
.button {
background: gray;
}
.blog .button {
background: blue;
}
というように、親要素のセレクタに依存してボタンの色が変わる、ということを指す
code:scss
@mixin create-context($classes...) {
@each $class in $classes {
.#{$class} & {
@content;
}
}
@mixin context--alternate-template {
@include create-context(about, blog) {
@content
}
}
.header {
height: 12em;
background: red;
@include context--alternate-template {
background: green;
}
}
このようにすることで
code:css
header {
height: 12em;
background: red;
}
.about .header {
background: green;
}
.blog .header {
background: green;
}
このように出力される
結果、「aboutやblogのとき」というコンテキストを.headerのスタイルを変更したい時
.header内で 特的のmixinをincludeして、ブロックでスタイルを渡すことで実現できる
当然、sass mixinによるBEMの簡略化ができる