I was expecting this to work (maybe unreasonably?)
// style1.scss
.Style1 {
/** @define Foo */
.Foo {}
.Foo__a {}
.Foo__b {}
/** @end */
/** @define Bar */
.Bar {}
.Bar__a {}
.Bar__b {}
/** @end */
}// style2.scss
.Style2 {
/** @define Foo */
.Foo {}
.Foo__a {}
.Foo__b {}
/** @end */
/** @define Bar */
.Bar {}
.Bar__a {}
.Bar__b {}
/** @end */
}
If, however, you have a good reason for multiple definitions within a single file, you can do that.
I think this is an OK reason? :)
I assumed the definitions apply to what they wrap.
Essentially the components are namespaced, e.g
<div class="Foo">
<div class="Foo__a"></div>
<div class="Foo__b"></div>
</div>
...but the actual styles are only applied when a parent class is present:
<body class="Style1">
<div class="Foo">
<div class="Foo__a"></div>
<div class="Foo__b"></div>
</div>
</div>
I was expecting this to work (maybe unreasonably?)
I think this is an OK reason? :)
I assumed the definitions apply to what they wrap.
Essentially the components are namespaced, e.g
...but the actual styles are only applied when a parent class is present: