Move functions to partials

application.scss

@@ -3,13 +3,12 @@
 
 //IMPORT CONFIG
 @use "config/config";
-@use "config/functions";
 @use "config/root";
 
 // IMPORT PARTIALS
+@use "partials/functions";
 @use "partials/base";
 @use "partials/fonts";
-@use "partials/margins";
 
 // IMPORT MODULES
 @use "modules/init";

partials/base.scss

@@ -1,4 +1,4 @@
-@use "../config/functions" as *;
+@use "functions" as *;
 
 * {
   margin: 0;

partials/margins.scss → partials/functions.scss

@@ -1,4 +1,49 @@
+@use "sass:map";
+@use "sass:string";
 @use "sass:list";
+@use "../config/config" as *;
+
+@mixin mq($mq-breakpoint, $mq-breakpoints: $breakpoints) {
+  @if map.has-key($mq-breakpoints, $mq-breakpoint) {
+    $mq-breakpoint: map.get($mq-breakpoints, $mq-breakpoint);
+  }
+  @media screen and (min-width: #{$mq-breakpoint}) {
+    @content;
+  }
+}
+
+@mixin transition(
+  $property: map.get($transition, property),
+  $duration: map.get($transition, duration),
+  $timing: map.get($transition, timing),
+  $delay: map.get($transition, delay)
+) {
+  transition-property: #{$property};
+  transition-duration: $duration;
+  transition-timing-function: $timing;
+  transition-delay: $delay;
+}
+
+@mixin fs($size: main) {
+  font-size: var(--fs-#{$size});
+  line-height: var(--lh-#{$size});
+}
+
+@mixin font($font: main) {
+  font-family: map.get(map.get($fonts, $font), name), string.unquote(map.get(map.get($fonts, $font), fallback));
+}
+
+@mixin touch {
+  @media (hover: none) and (pointer: coarse) {
+    @content;
+  }
+}
+
+@mixin notouch {
+  @media (hover: hover) and (pointer: fine) {
+    @content;
+  }
+}
 
 @mixin property($property, $values) {
   $top: $property + "-top";
@@ -36,3 +81,27 @@
 @mixin margin($values) {
   @include property(margin, $values);
 }
+
+////////////////////////////
+
+:root {
+  --base-space: #{$space};
+
+  @each $color, $value in $colors {
+    --color-#{$color}: #{$value};
+  }
+
+  @each $size, $value in $margin {
+    --margin-#{$size}: calc(var(--base-space) * #{$value});
+  }
+
+  @each $size, $item in $fontsize {
+    @each $screen, $values in $item {
+      @include mq($screen) {
+        @each $type, $value in $values {
+          --#{$type}-#{$size}: #{$value};
+        }
+      }
+    }
+  }
+}