css - sass bem element modifier inheriting said elements properties -
i know sass provides @extend method allows me this:
%knob { width: 10px; height: 10px; } .house { &__door { &__knob { color: inherit; @extend %knob; &--red { @extend %knob; // $1 color: red; } &--blue{ @extend %knob; // $1 color: blue; } } } }
however prefer not define abstract class %knob
@ all, possible reference/include properties defined in __knob
(width , height in case) within modifiers --red
, --blue
?
im including sassmeister snippet here out bit: http://sassmeister.com/gist/58b5b4673a18ecadbba7
example here might not issue if element long class name has 2 or more different groups of modifiers, , wont create abstract class, end html tags looking <p class="some other classes some-house__some-door__some-knob some-house__some-door__some-knob--red">example</p>
find not desirable.
what achieve:
referencing parent element alow me reduce string <p class="some other classes some-house__some-door__some-knob--red"></p>
without necessity of declaring abstract %knob
class
why hesitant using abstract class here:
declaring abstract class inside __door
element (http://sassmeister.com/gist/bc49e0885342e96a8fbd) gives me result:
.house__door .house__door__knob, .house__door .house__door__knob--red, .house__door .house__door__knob--blue { width: 10px; height: 10px; }
instead of desired
.house__door__knob, .house__door__knob--red, .house__door__knob--blue { width: 10px; height: 10px; }
and declaring abstract class outside of scope going used in makes code less readable
or maybe theres different apporach use in order make code more readable/maintainable?
while searching answer question came conclusion inheriting parent element properties/ using @extend or @include here might not best idea work if element had 1 modification @ most:
in other cases if multiple modifications extended same model, , used same html element, of base properties declared multiple times
also there no need @ nest elements (i.e. foo__bar__baz
). separating elements makes code easier maintain.
Comments
Post a Comment