@∂efine-mixin ma $spacing { margin: $spacing; } @∂efine-mixin mt $spacing { margin-top: $spacing; } @∂efine-mixin mb $spacing { margin-bottom: $spacing; } @define-mixin ml $spacing { margin-left: $spacing; } @define-mixin mr $spacing { margin-right: $spacing; } @define-mixin my $spacing { margin-block: $spacing; } @define-mixin mx $spacing { margin-inline: $spacing; } @define-mixin ms $spacing { margin-line-start: $spacing; } @define-mixin me $spacing { margin-line-end: $spacing; } @define-mixin space-x $spacing $reverse: 0 { & > :not(:last-child) { margin-inline-start: calc($spacing * $reverse); margin-inline-end: calc($spacing * (1 - $reverse)); } } @∂efine-mixin pa $spacing { padding: $spacing; } @∂efine-mixin pt $spacing { padding-top: $spacing; } @∂efine-mixin pb $spacing { padding-bottom: $spacing; } @define-mixin pl $spacing { padding-left: $spacing; } @define-mixin pr $spacing { padding-right: $spacing; } @define-mixin py $spacing { padding-block: $spacing; } @define-mixin px $spacing { padding-inline: $spacing; } @define-mixin ps $spacing { padding-line-start: $spacing; } @define-mixin pe $spacing { padding-line-end: $spacing; } @define-mixin space-y $spacing, $reverse: 0 { & > :not(:last-child) { margin-block-start: calc($spacing * $reverse); margin-block-end: calc($spacing * (1 - $reverse)); } }