JoeCianflone

@use 'sass:selector';
@use 'sass:list';
@use 'sass:string';

@function replace($string, $search, $replace: '') {
    $index: string.index($string, $search);

    @if $index {
        @return string.slice($string, 1, $index - 1) + $replace + replace(string.slice($string, $index + string.length($search)), $search, $replace);
    }

JoeCianflone

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

JoeCianflone

@mixin when($parent-selector, $child: &) {
   @at-root {
       #{$parent-selector} #{$child} {
           @extend #{$child};
           @content;
       }
   }
}

.foo {

JoeCianflone

@mixin when($parent-selector, $child: &) {
    @at-root {
        #{$parent-selector} #{$child} {
            @extend #{$child};
            @content;    
        }
    }
}

.media {

JoeCianflone

$mq: ("xs": #{"min-width: 480px"});

@mixin at-size($size) {
  &\:#{$size} {
    @content;
  }
}

@mixin for-variant($parent) {
  &\:#{$parent} {

JoeCianflone

$mq: (
   'xs': #{'min-width: 480px'},
);

@mixin at-size($size) {
   &\:#{$size} {
       @content;
    }
 }
 

JoeCianflone

$mq: (
   'xs': #{'min-width: 480px'},
);

@mixin at-size($size) {
   &\:#{$size} {
       @content;
    }
 }

JoeCianflone

$mq: (
   'xs': #{'min-width: 480px'},
);

@mixin at-size($size) {
   &\:#{$size} {
       @content;
    }
 }

JoeCianflone

$mq: (
   'xs': #{'min-width: 480px'},
);

@mixin at-size($size) {
   &\:#{$size} {
       @content;
    }
 }

JoeCianflone

$mq: (
   'xs': #{'min-width: 480px'},
   'sm': #{'min-width: 576px'},
   'md': #{'min-width: 768px'},
   'wd': #{'min-width: 900px'},
   'xw': #{'min-width: 1024px'},
   'lg': #{'min-width: 1280px'},
   'xl': #{'min-width: 1366px'},
);