> For the complete documentation index, see [llms.txt](https://spectrecss.angular-package.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://spectrecss.angular-package.dev/mixin/margin/margin-size-variants.md).

# margin-size-variants()

{% code title="" lineNumbers="true" %}

```scss
@mixin margin-size-variants($name: margin) {
  &.#{$name}-xs {
    margin: calc(get-var('control-padding-y', $suffix: 'sm') + unit-var('1')) calc(get-var('control-padding-x', $suffix: 'sm') + unit-var('1'));
  }

  &.#{$name}-sm {
    margin: calc(get-var('control-padding-y', $suffix: 'sm') + unit-var('2')) calc(get-var('control-padding-x', $suffix: 'sm') + unit-var('2'));
  }

  &.#{$name}-md {
    margin: calc(get-var('control-padding-y') + unit-var('2')) calc(get-var('control-padding-x') + unit-var('2'));
  }

  &.#{$name}-lg {
    margin: calc(get-var('control-padding-y', $suffix: 'lg') + unit-var('2')) calc(get-var('control-padding-x', $suffix: 'lg') + unit-var('2'));
  }

  &.#{$name}-xl {
    margin: calc(get-var('control-padding-y', $suffix: 'lg') + unit-var('4')) calc(get-var('control-padding-x', $suffix: 'lg') + unit-var('4'));
  }
}

```

{% endcode %}