Skip to content

Instantly share code, notes, and snippets.

@thekingofspain
Last active May 4, 2023 04:58
Show Gist options
  • Save thekingofspain/753b315c592c96b2259711544bd0611a to your computer and use it in GitHub Desktop.
Save thekingofspain/753b315c592c96b2259711544bd0611a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
$common-values: stretch center flex-start flex-end initial inherit;
$self-values: auto baseline;
$items-values: normal start end baseline;
$content-values: space-between space-around space-evenly;
@mixin align($name, $values) {
@each $value in $values {
&-#{$name}-#{$value}
{
align-#{$name}: #{$value};
}
}
}
.align {
@include align(self, join($common-values, $self-values));
@include align(items, join($common-values, $items-values));
@include align(content, join($common-values, $content-values));
}
.align-self-stretch {
align-self: stretch;
}
.align-self-center {
align-self: center;
}
.align-self-flex-start {
align-self: flex-start;
}
.align-self-flex-end {
align-self: flex-end;
}
.align-self-initial {
align-self: initial;
}
.align-self-inherit {
align-self: inherit;
}
.align-self-auto {
align-self: auto;
}
.align-self-baseline {
align-self: baseline;
}
.align-items-stretch {
align-items: stretch;
}
.align-items-center {
align-items: center;
}
.align-items-flex-start {
align-items: flex-start;
}
.align-items-flex-end {
align-items: flex-end;
}
.align-items-initial {
align-items: initial;
}
.align-items-inherit {
align-items: inherit;
}
.align-items-normal {
align-items: normal;
}
.align-items-start {
align-items: start;
}
.align-items-end {
align-items: end;
}
.align-items-baseline {
align-items: baseline;
}
.align-content-stretch {
align-content: stretch;
}
.align-content-center {
align-content: center;
}
.align-content-flex-start {
align-content: flex-start;
}
.align-content-flex-end {
align-content: flex-end;
}
.align-content-initial {
align-content: initial;
}
.align-content-inherit {
align-content: inherit;
}
.align-content-space-between {
align-content: space-between;
}
.align-content-space-around {
align-content: space-around;
}
.align-content-space-evenly {
align-content: space-evenly;
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment