Improved variable structure

1 files changed, 19 insertions, 18 deletions

diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index efe5203..af5b208 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,5 +1,6 @@
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
+@use '../functions' as fn;
 
 @include iro.props-namespace('container') {
     @include iro.props-store((
@@ -8,16 +9,16 @@
             --sm-content-width:  iro.fn-px-to-rem(360px),
             --padding-x:         3rem,
             --padding-y:         3rem,
-            --in-page-spacing-y: iro.props-get(--dims --spacing --y --xl, $global: true),
+            --in-page-spacing-y: fn.dim(--spacing --y --xl, $global: true),
         )
-    ));
+    ), 'dims');
 
     @include iro.bem-layout(iro.props-namespace()) {
         overflow: hidden;
 
         @include iro.bem-elem('inner') {
-            margin-top:    calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
-            margin-bottom: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
+            margin-top:    calc(-1 * fn.dim(--spacing --y --xl, $global: true));
+            margin-bottom: calc(-1 * fn.dim(--spacing --y --xl, $global: true));
 
             &::before,
             &::after {
@@ -28,33 +29,33 @@
             }
 
             &::before {
-                margin-bottom: iro.props-get(--dims --spacing --y --xl, $global: true);
+                margin-bottom: fn.dim(--spacing --y --xl, $global: true);
             }
 
             &::after {
-                margin-top: iro.props-get(--dims --spacing --y --xl, $global: true);
+                margin-top: fn.dim(--spacing --y --xl, $global: true);
             }
         }
 
         @include iro.bem-modifier('pad-x') {
-            padding-right: iro.props-get(--dims --padding-x);
-            padding-left:  iro.props-get(--dims --padding-x);
+            padding-right: fn.dim(--padding-x);
+            padding-left:  fn.dim(--padding-x);
         }
 
         @include iro.bem-modifier('pad-y') {
-            padding-top:    iro.props-get(--dims --padding-y);
-            padding-bottom: iro.props-get(--dims --padding-y);
+            padding-top:    fn.dim(--padding-y);
+            padding-bottom: fn.dim(--padding-y);
         }
 
         @include iro.bem-modifier('narrow') {
-            max-width:    iro.props-get(--dims --content-width);
+            max-width:    fn.dim(--content-width);
             margin-right: auto;
             margin-left:  auto;
 
             @each $breakpoint in map-keys(media.$breakpoints) {
                 @include media.media('<=#{$breakpoint}') {
                     @include iro.bem-suffix('#{$breakpoint}-down') {
-                        max-width:    iro.props-get(--dims --content-width);
+                        max-width:    fn.dim(--content-width);
                         margin-right: auto;
                         margin-left:  auto;
                     }
@@ -63,14 +64,14 @@
         }
 
         @include iro.bem-modifier('sm-narrow') {
-            max-width:    iro.props-get(--dims --sm-content-width);
+            max-width:    fn.dim(--sm-content-width);
             margin-right: auto;
             margin-left:  auto;
 
             @each $breakpoint in map-keys(media.$breakpoints) {
                 @include media.media('<=#{$breakpoint}') {
                     @include iro.bem-suffix('#{$breakpoint}-down') {
-                        max-width:    iro.props-get(--dims --sm-content-width);
+                        max-width:    fn.dim(--sm-content-width);
                         margin-right: auto;
                         margin-left:  auto;
                     }
@@ -79,13 +80,13 @@
         }
 
         @include iro.bem-modifier('themed') {
-            background-color: iro.props-get(--colors --bg, $global: true);
-            color:            iro.props-get(--colors --fg, $global: true);
+            background-color: fn.color(--bg, $global: true);
+            color:            fn.color(--fg, $global: true);
         }
 
         @include iro.bem-modifier('in-page') {
-            margin-top:    iro.props-get(--dims --in-page-spacing-y);
-            margin-bottom: iro.props-get(--dims --in-page-spacing-y);
+            margin-top:    fn.dim(--in-page-spacing-y);
+            margin-bottom: fn.dim(--in-page-spacing-y);
         }
     }
 }