jcarrier-theme

commit a1d33ca4dfba49b13200854363f3060b205813b6
parent ff24849d199977e5c9d4e621e4bfc2d146ab0bf6
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sun,  6 Dec 2020 16:02:10 -0500

Add scss functions and mixins

Diffstat:
M
src/scss/global/_abstractions.scss
 | 
1
+
A
src/scss/global/functions/_em-calc.scss
 | 
7
+++++++
A
src/scss/global/functions/_rem-calc.scss
 | 
7
+++++++
A
src/scss/global/functions/_strip-unit.scss
 | 
10
++++++++++
A
src/scss/global/mixins/_mq-from.scss
 | 
25
+++++++++++++++++++++++++
A
src/scss/global/mixins/_mq-to.scss
 | 
25
+++++++++++++++++++++++++

6 files changed, 75 insertions(+), 0 deletions(-)
diff --git a/src/scss/global/_abstractions.scss b/src/scss/global/_abstractions.scss
@@ -1,5 +1,6 @@
 $base-fontsize: 16;
 $base-lineheight: 1.5;
+$grid-breakpoints: (xs: 320px, xsm: 360px, sm: 480px, md: 768px, lg: 1024px, xl: 1280px, xxl: 1440px);
 $grid-minwidth: 240px;
 
 :root {
diff --git a/src/scss/global/functions/_em-calc.scss b/src/scss/global/functions/_em-calc.scss
@@ -0,0 +1,7 @@
+// Convert PX to EM unit
+// `$size` must be in pixels
+@function em-calc($size, $context: $base-fontsize) {
+    $emSize: $size / $base-fontsize;
+
+    @return #{$emSize}em;
+}
diff --git a/src/scss/global/functions/_rem-calc.scss b/src/scss/global/functions/_rem-calc.scss
@@ -0,0 +1,7 @@
+// Convert PX to REM unit
+// `$size` must be in pixels
+@function rem-calc($size) {
+  $remSize: $size / $base-fontsize;
+
+  @return #{$remSize}rem;
+}
diff --git a/src/scss/global/functions/_strip-unit.scss b/src/scss/global/functions/_strip-unit.scss
@@ -0,0 +1,10 @@
+/// Remove the unit of a length
+/// @param {Number} $number - Number to remove unit from
+/// @return {Number} - Unitless number
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}
diff --git a/src/scss/global/mixins/_mq-from.scss b/src/scss/global/mixins/_mq-from.scss
@@ -0,0 +1,25 @@
+// Set a @media query *mobile first* rule from the `$grid-breakpoints` map
+// @Usage:
+// @include mq-from(sm) {
+//   .element {
+//     width: 50%;
+//   }
+// }
+
+@mixin mq-from($breakpoint) {
+    // If the breakpoint exists in the map.
+    @if map-has-key($grid-breakpoints, $breakpoint) {
+        // Get the breakpoint value.
+        $breakpoint-value: map-get($grid-breakpoints, $breakpoint);
+        $remSize: $breakpoint-value / 16px;
+
+        // Write the media query.
+        @media (min-width: #{$remSize}rem) {
+            @content;
+        }
+    } @else {
+        // If the breakpoint doesn't exist in the map.
+        // Log a warning.
+        @warn 'Invalid breakpoint: #{$breakpoint}.';
+    }
+}
diff --git a/src/scss/global/mixins/_mq-to.scss b/src/scss/global/mixins/_mq-to.scss
@@ -0,0 +1,25 @@
+// Set a @media query *mobile first* rule from the `$grid-breakpoints` map
+// @Usage:
+// @include mq-to(lg) {
+//   .element {
+//     width: 50%;
+//   }
+// }
+
+@mixin mq-to($breakpoint) {
+    // If the breakpoint exists in the map.
+    @if map-has-key($grid-breakpoints, $breakpoint) {
+        // Get the breakpoint value.
+        $breakpoint-value: map-get($grid-breakpoints, $breakpoint);
+        $remSize: ($breakpoint-value - 1) / 16px;
+
+        // Write the media query.
+        @media (max-width: #{$remSize}rem) {
+            @content;
+        }
+    } @else {
+        // If the breakpoint doesn't exist in the map.
+        // Log a warning.
+        @warn 'Invalid breakpoint: #{$breakpoint}.';
+    }
+}