new-challenge+project

challenges/06-custom-props/_breakpoints.scss

@@ -0,0 +1,5 @@
+$breakpoints: (
+  small: 30em,
+  medium: 45em,
+  large: 65em
+);

challenges/06-custom-props/_font-sizes.scss

@@ -0,0 +1,26 @@
+$font-sizes: (
+  'small': (
+    '900': 3rem,
+    '800': 2.625rem,
+    '700': 1.75rem,
+    '600': 1.25rem,
+    '500': 1.125rem,
+    '400': 1rem
+  ),
+  'medium': (
+    '900': 3.25rem,
+    '800': 2.75rem,
+    '700': 1.75rem,
+    '600': 1.5rem,
+    '500': 1.125rem,
+    '400': 1rem
+  ),
+  'large': (
+    '900': 3.75rem,
+    '800': 3rem,
+    '700': 2rem,
+    '600': 1.5rem,
+    '500': 1.25rem,
+    '400': 1rem
+  )
+);

challenges/06-custom-props/_mixins.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'breakpoints' as *;
+
+@mixin mq($size) {
+  @if map.has-key($breakpoints, $size) {
+    $breakpoint: map-get($breakpoints, $size);
+    @media screen and (min-width: $breakpoint) {
+      @content;
+    }
+  } @else if meta.type-of($size) == number {
+    @if math.is-unitless($size) {
+      @error 'when using a number with @mq() make sure to include a unit';
+    } @else {
+      @media screen and (min-width: $size) {
+        @content;
+      }
+    }
+  } @else {
+    @error 'the keyword #{$size} is not in the $breakpoints map';
+  }
+}

challenges/06-custom-props/main.scss

@@ -0,0 +1,5 @@
+@use 'sass:map';
+@use 'font-sizes' as *;
+@use 'mixins' as *;
+@use 'breakpoints' as *;
+