khamer

.stuff {
    $color: #808080;
    color: $color;
    color: #{fade-out($color, .5)};
    $color2: #80808080;
    color: #{fade-out($color2, .25)};
}

khamer

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

// Skip to line 50

@function unslash-colons($str) {
    $index: string.index($str, \:);
    @if $index != null {
        @return unslash-colons(string.slice($str, 1, $index - 1) + string.slice($str, $index + 1));

khamer

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

// Skip to line 50

@function unslash-colons($str) {
    $index: string.index($str, \:);
    @if $index != null {
        @return unslash-colons(string.slice($str, 1, $index - 1) + string.slice($str, $index + 1));

khamer

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

@function unslash-colons($str) {
    $index: string.index($str, \:);
    @if $index != null {
        @return unslash-colons(string.slice($str, 1, $index - 1) + string.slice($str, $index + 1));
    } @else {
        @return $str;

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>

*/

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>

*/

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

@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

$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);
    }