scss/custom-properties/spacing/_mixins.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@use 'sass:map';

@use '../../values/spacing' as spacing-values;

@mixin spacing($breakpoint: initial) {
  --spacing-inline-lg: #{spacing-values.spacing($direction: inline, $size: lg, $breakpoint: $breakpoint)};
  --spacing-inline-md: #{spacing-values.spacing($direction: inline, $size: md, $breakpoint: $breakpoint)};
  --spacing-inline-sm: #{spacing-values.spacing($direction: inline, $size: sm, $breakpoint: $breakpoint)};
  --spacing-block-lg: #{spacing-values.spacing($direction: block, $size: lg, $breakpoint: $breakpoint)};
  --spacing-block-md: #{spacing-values.spacing($direction: block, $size: md, $breakpoint: $breakpoint)};
  --spacing-block-sm: #{spacing-values.spacing($direction: block, $size: sm, $breakpoint: $breakpoint)};
}

@mixin grid($breakpoint: initial) {
  --grid-padding: #{spacing-values.grid-padding($breakpoint: $breakpoint)};
  --grid-column-count: #{map.get(spacing-values.$grid-column-count, $breakpoint)};
  --grid-column-width: #{spacing-values.grid-column-width($breakpoint: $breakpoint)};
  --grid-gutter-width: #{spacing-values.grid-gutter-width($breakpoint: $breakpoint)};
  --grid-prose-column-count: #{map.get(spacing-values.$grid-prose-column-count, $breakpoint)};
  --grid-total-width: #{spacing-values.grid-total-width-absolute($breakpoint)};
}