Get rid of @extend

[gpbl]

The original code makes extensive use of the @extend counterpart in Less. This pattern doesn't fit very well, being a priority nightmare when it is used too much and preventing the use of mixins. I'd check out each @extend and provide a relative mixin, if needed.

[una]

nothing wrong with @extend, but yeah we should look into the potential to concatenate as many of them into mixins as we can

[gpbl]

The reasoning is the order Sass resolves the @extends. Take as example the .logo selector used in the doc:

.logo {
  cursor: pointer;
  @extend .mui-font-style-headline;
  @extend .mui-text-full-white;
  line-height: $app-bar-height;
  @extend .mui-font-weight-light;
  background-color: $primary-1-color;
  padding-left: $desktop-gutter;
  padding-top: 0;
  margin-bottom: $desktop-gutter-mini;
}

The order of the extends is the same as in the original less file, but it produces different results:

Original less:

Sassified version:

This is because .mui-font-style-headline overwrites .mui-font-weight-light: both are changing the font-weight.

For me this is not the right way to use CSS. Using a BEM-like syntax as I suggest here would avoid this kind of issues. Instead of <div class="logo"/>, it should be <div class="mui-font--headline mui-text--white mui-font--light logo">

Those new BEM-like classes could just use a variable (if they change only a property), or a mixin, if they do something more:

.mui-text--light {
   font-weight: $font-weight-light;
}

.mui-font--headline {
   @include font-headline();
}

Other classes using this will not need to @extend .mui-font--headline. @extend is hard to maintain when it is overused, we should use a preprocessor to help solving the difficulties of CSS, not spreading them :-)

[una]

I see the problem. I completely agree with a more BEM-like approach

[gpbl]

Closed because of #21