How do I create a scoped class without @include?

Question

I managed to create a scoped CSS class like this:

.container {
    
    @import "./baa";

    /* other props ... */
}

but since @import is getting depreciated, what are my options to make a scoped CSS class now?

Answer 1

If you want to keep your CSS separated from any "framework" setup, the best way is probably to use the mixins system. It's definitely not the best way, but it's what come the closest as what you want, without going with CSS modules or else.

You can define your mixins in some file and import them where you need.

Exemple:

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}