Mixins in Sass VS Abandoned CSS @apply rule

browserslist

> 1%
last 2 versions

can-be.css

/* Как могло бы быть в CSS*/
/* @apply https://tabatkins.github.io/specs/css-apply-rule/ */

:root {
  --toolbar-theme: {
    background-color: hsl(120, 70%, 95%);
    border-radius: 4px;
    border: 1px solid var(--theme-color late);
  };
  --toolbar-title-theme: {
    color: green;
  };
}

.toolbar {
  @apply --toolbar-theme;
}
.toolbar > .title {
  @apply --toolbar-title-theme;
}

link.md

See live

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

// Уже есть в препроцессорах

@mixin toolbar-theme($theme-color: late) {
  background-color: hsl(120, 70%, 95%);
  border-radius: 4px;
  border: 1px solid $theme-color;
}
@mixin toolbar-title-theme($title-color: green) {
  color: $title-color;
}

.toolbar {
  @include toolbar-theme();
}
.toolbar > .title {
  @include toolbar-title-theme();
}

SassMeister-output.css

.toolbar {
  background-color: #e9fbe9;
  border-radius: 4px;
  border: 1px solid late;
}

.toolbar > .title {
  color: green;
}