zastrow

@use "sass:map";

$sizes: (
    'regular': 1rem,
    'small': 0.875rem,
    'large': 2rem
);

@function size($size) {
    @return map.get($sizes, $size);

zastrow

$bp-sm: 36rem;

.my-class {
	color: red;
	font-size: 1.25rem;
	font-family: sans-serif;

	@media (min-width: $bp-sm) {
		font-size: 2rem;
	}

zastrow

//Breakpoints
$bp-sm: 30rem;
$bp-md: 50rem;
$bp-lg: 60rem;
$bp-xl: 80rem;

$grid-breakpoints: (
  sm: $bp-sm,
  md: $bp-md,
  lg: $bp-lg,

zastrow

// This function pairs with the `motion` mixin
// to convert a `true` or `false` value to the
// appropriate media query value for reduce motion.
@function motion($value) {
  @if $value {
    @return 'no-preference';
  }
  @else {
    @return 'reduce';
  }

zastrow

// Simplified version of color schemes. Options are `light` or `dark`
@mixin color-mode($value: light) {
  @media (prefers-color-scheme: $value) {
    @content;
  }
}

zastrow

$media-queries: (
    sm: 40rem,
    lg: 80rem
);

@mixin loop-states {
    &,
    &\:hover:hover,
    &\:active:active,
    &\:focus:focus {

zastrow

$font-stack: sytem-ui, sans-serif;

@function font($override:null) {
    @if $override {
        @return $font-stack !important;
    }
    @else {
        @return $font-stack;
    }
}

zastrow

$font-stack: sytem-ui, sans-serif;

@mixin font($override:null) {
    font-family: $font-stack $override;
}

.my-class {
    @include font;
}

zastrow

const checkIE = () => {
  const isIE = /* @cc_on!@ */false || !!document.documentMode;

  if (isIE) {
    const html = document.getElementsByTagName('html')[0];
    html.className += ' ie11';
  }
};

checkIE();

zastrow

//  Helper function to replace characters in a string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @return if($index, str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace), $string);
}

// SVG URL fixer Icons by Taylor Hunt
// http://codepen.io/tigt/post/optimizing-svgs-in-data-uris
//  Function to create an optimized svg url
@function svg($svg) {