Scss Variables as @Extend Class

SCSS Variables as @extend class

try using variables interpolation

@extend #{$type};

Further information on SASS Reference

Updating a SASS variable within an extended class

The solution for this problem using a SASS mixin. Thanks to @cimmanon and this thread: Updating variables created by lighten/darken functions by modifying the original base color afterwards

@mixin _menuHighlight($child) {
  a {
      &:nth-child(#{$child})  {
      color: red !important;
    }
  }
}

  .menu-highlight-1 {
    @include _menuHighlight(1);
  }

  .menu-highlight-2 {
    @include _menuHighlight(2);
  }

How to extend a class from an imported SCSS?

I don't think the import statement is correct. Try @import 'shared.scss'

Similar issue to https://stackoverflow.com/a/51480665/271012

SASS: Extending Classess vs Variables

There are a few issues. One is simply the crazy-slippery-slope nature of it. This will come back to bite you as a maintenance issue. A class-per-property just doesn't make sense as a code organization scheme. That doesn't mean you're far off - @extend is great for something like this, within reason.

Reason is the key: your groupings should make sense as groupings. While html-style content-semantics are not important with @extends, there should still be a sense of semantic organization. I've seen the term "visual-semantics" floating around for this. Your naming should go beyond describing the effect, and describe the visual reason for it instead. not %yellow, but %highlight-text. Not %red, but %warning. Not what, but why.

The other problem is the cascade. The order of your output code is very important, because it affects the cascade (which is an essential part of CSS). With this approach, you will find yourself fighting against the cascade on a regular basis - because you are giving up control of the code order. @extend is great for broad and simple default groupings, but it isn't any good at cascade overrides.

SASS - Extend class across multiple files

That's what placeholders made for. Instead of this:

.stretch { color: #F00 }
.a { @extend .stretch; }
.b { @extend .stretch; }
.c { @extend .stretch; }

use this:

%stretch { color: #F00 }
.a { @extend %stretch; }
.b { @extend %stretch; }
.c { @extend %stretch; }

It will produce the following css:

.a, .b, .c {
  color: red; 
}

I.e. the stretch class is not included in the final compiled CSS, but you could still use it in SASS.

---

Related Topics