khamer

.foo {
    color: blue;
}

@media (screen and min-width: 1000px) {
    .bar {
        @extend .foo;
    }
}

khamer

.link {
    color: blue;
    text-decoration: underline;
    
    &.-secondary {
        color: green;
    }
    
    /* variant */
    &--button {

khamer

.link {
    color: blue;
    text-decoration: underline;
    
    &.-secondary {
        color: green;
    }
    
    /* variant */
    &--button {

khamer

header.primary,
header.secondary {
    @extend %header;
}

%header {
    color: navy;
    margin-bottom: 1rem;
    
    &.primary {

khamer

header.primary,
header.secondary {
    color: navy;
    margin-bottom: 1rem;
    
    &.primary {
        font-size: 3rem;
    }
    
    &.secondary {

khamer

$breakpoints: (
  md: 576px,
  lg: 1024px,
  xl: 1200px
) !default;

@mixin at($bp, $rule: min-width) {
    @if map-has-key($breakpoints, $bp) {
        $bp: map-get($breakpoints, $bp);
    }

khamer

$breakpoints: (
  md: 576px,
  lg: 1024px,
  xl: 1200px
) !default;

@mixin at($bp, $rule: min-width) {
    @if map-has-key($breakpoints, $bp) {
        $bp: map-get($breakpoints, $bp);
    }

khamer

@use "sass:map";
@use "sass:list";

@function hydrate($base, $map) {
    $new: ();
    @each $key, $value in $base {
        $new: list.append($new, $value or map-get($map, $key) or $key);
    }
    @return $new;
}

khamer

@mixin at($bp, $rule: min-width) {
    @if map-has-key($breakpoints, $bp) {
        $bp: map-get($breakpoints, $bp);
    }
    @media screen and (#{$rule}: $bp) {
        @content;
    }
}

@mixin at-each($map...) {

khamer

/*

<div class="layer bgWhite">…</div>
<div class="layer bgGold">…</div>
<div class="layer bgWhite">…</div>
<div class="layer bgWhite">…</div>
<div class="layer bgGold">…</div>

*/