Skip to content

Instantly share code, notes, and snippets.

@christiannaths

christiannaths/input.scss

Created March 30, 2023 18:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save christiannaths/d0163d01f918ed0d57a745846fbdc241 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save christiannaths/d0163d01f918ed0d57a745846fbdc241 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. christiannaths revised this gist Mar 30, 2023. No changes.
  2. christiannaths created this gist Mar 30, 2023.
    288 changes: 288 additions & 0 deletions input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,288 @@
    @use "sass:string";

    @function abr($string) {
    @return string.slice($string, 0, 3);
    }

    .grid {
    display: grid;
    }

    @each $direction in ("column", "row") {
    /* ------------------- Grid Template #{$direction}s */
    @for $i from 1 through 24 {
    .grid-#{abr($direction)}s-#{$i} {
    grid-template-#{$direction}s: repeat($i, minmax(0, 1fr));
    }
    }
    }

    @each $direction in ("column", "row") {
    /* ------------------- Grid #{$direction}s Start/End */
    @for $i from 1 through 24 {
    .#{abr($direction)}-span-#{$i} {
    grid-#{$direction}: span $i / span $i;
    }

    .#{abr($direction)}-start-#{$i} {
    grid-#{$direction}-start: $i;
    }

    .#{abr($direction)}-end-#{$i} {
    grid-#{$direction}-end: $i;
    }
    }
    }

    @each $direction in ("column", "row") {
    /* ------------------- Grid #{$direction}s Flow */
    .grid-#{abr($direction)}s-none {
    grid-template-#{$direction}s: none;
    }

    .grid-flow-#{abr($direction)} {
    grid-auto-flow: #{$direction};
    }

    .grid-flow-#{abr($direction)}-dense {
    grid-auto-flow: #{$direction} dense;
    }

    .auto-#{abr($direction)}s-auto {
    grid-auto-#{$direction}s: auto;
    }

    .auto-#{abr($direction)}s-min {
    grid-auto-#{$direction}s: min-content;
    }

    .auto-#{abr($direction)}s-max {
    grid-auto-#{$direction}s: max-content;
    }

    .auto-#{abr($direction)}s-fr {
    grid-auto-#{$direction}s: minmax(0, 1fr);
    }
    }

    .grid-flow-dense {
    grid-auto-flow: dense;
    }

    /* ------------------- Grid Order */

    @for $i from 1 through 24 {
    .order-#{$i} {
    order: $i;
    }
    }

    .order-first {
    order: -9999;
    }

    .order-last {
    order: 9999;
    }

    .order-none {
    order: 0;
    }

    /* ------------------- Grid Gap */

    @each $size
    in (
    "xxxSmall",
    "small",
    "xxSmall",
    "xSmall",
    "small",
    "normal",
    "average",
    "xLarge",
    "xxLarge",
    "big",
    "large",
    "huge"
    )
    {
    .gap-#{$size} {
    gap: unquote("$spacing-#{$size}");
    }
    .gap-x-#{$size} {
    column-gap: unquote("$spacing-#{$size}");
    }
    .gap-y-#{$size} {
    row-gap: unquote("$spacing-#{$size}");
    }
    }

    /* ------------------- Grid Align/Justify */

    .justify-normal {
    justify-content: normal;
    }
    .justify-start {
    justify-content: flex-start;
    }
    .justify-end {
    justify-content: flex-end;
    }
    .justify-center {
    justify-content: center;
    }
    .justify-between {
    justify-content: space-between;
    }
    .justify-around {
    justify-content: space-around;
    }
    .justify-evenly {
    justify-content: space-evenly;
    }
    .justify-stretch {
    justify-content: stretch;
    }

    .justify-items-start {
    justify-items: start;
    }
    .justify-items-end {
    justify-items: end;
    }
    .justify-items-center {
    justify-items: center;
    }
    .justify-items-stretch {
    justify-items: stretch;
    }
    .justify-self-auto {
    justify-self: auto;
    }
    .justify-self-start {
    justify-self: start;
    }
    .justify-self-end {
    justify-self: end;
    }
    .justify-self-center {
    justify-self: center;
    }
    .justify-self-stretch {
    justify-self: stretch;
    }
    .content-normal {
    align-content: normal;
    }
    .content-center {
    align-content: center;
    }
    .content-start {
    align-content: flex-start;
    }
    .content-end {
    align-content: flex-end;
    }
    .content-between {
    align-content: space-between;
    }
    .content-around {
    align-content: space-around;
    }
    .content-evenly {
    align-content: space-evenly;
    }
    .content-baseline {
    align-content: baseline;
    }
    .content-stretch {
    align-content: stretch;
    }
    .items-start {
    align-items: flex-start;
    }
    .items-end {
    align-items: flex-end;
    }
    .items-center {
    align-items: center;
    }
    .items-baseline {
    align-items: baseline;
    }
    .items-stretch {
    align-items: stretch;
    }
    .self-auto {
    align-self: auto;
    }
    .self-start {
    align-self: flex-start;
    }
    .self-end {
    align-self: flex-end;
    }
    .self-center {
    align-self: center;
    }
    .self-stretch {
    align-self: stretch;
    }
    .self-baseline {
    align-self: baseline;
    }
    .place-content-center {
    place-content: center;
    }
    .place-content-start {
    place-content: start;
    }
    .place-content-end {
    place-content: end;
    }
    .place-content-between {
    place-content: space-between;
    }
    .place-content-around {
    place-content: space-around;
    }
    .place-content-evenly {
    place-content: space-evenly;
    }
    .place-content-baseline {
    place-content: baseline;
    }
    .place-content-stretch {
    place-content: stretch;
    }
    .place-items-start {
    place-items: start;
    }
    .place-items-end {
    place-items: end;
    }
    .place-items-center {
    place-items: center;
    }
    .place-items-baseline {
    place-items: baseline;
    }
    .place-items-stretch {
    place-items: stretch;
    }
    .place-self-auto {
    place-self: auto;
    }
    .place-self-start {
    place-self: start;
    }
    .place-self-end {
    place-self: end;
    }
    .place-self-center {
    place-self: center;
    }
    .place-self-stretch {
    place-self: stretch;
    }
    1,312 changes: 1,312 additions & 0 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,1312 @@
    .grid {
    display: grid;
    }

    /* ------------------- Grid Template columns */
    .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    }

    .grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
    }

    .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .grid-cols-13 {
    grid-template-columns: repeat(13, minmax(0, 1fr));
    }

    .grid-cols-14 {
    grid-template-columns: repeat(14, minmax(0, 1fr));
    }

    .grid-cols-15 {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    }

    .grid-cols-16 {
    grid-template-columns: repeat(16, minmax(0, 1fr));
    }

    .grid-cols-17 {
    grid-template-columns: repeat(17, minmax(0, 1fr));
    }

    .grid-cols-18 {
    grid-template-columns: repeat(18, minmax(0, 1fr));
    }

    .grid-cols-19 {
    grid-template-columns: repeat(19, minmax(0, 1fr));
    }

    .grid-cols-20 {
    grid-template-columns: repeat(20, minmax(0, 1fr));
    }

    .grid-cols-21 {
    grid-template-columns: repeat(21, minmax(0, 1fr));
    }

    .grid-cols-22 {
    grid-template-columns: repeat(22, minmax(0, 1fr));
    }

    .grid-cols-23 {
    grid-template-columns: repeat(23, minmax(0, 1fr));
    }

    .grid-cols-24 {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    }

    /* ------------------- Grid Template rows */
    .grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
    }

    .grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
    }

    .grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
    }

    .grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
    }

    .grid-rows-7 {
    grid-template-rows: repeat(7, minmax(0, 1fr));
    }

    .grid-rows-8 {
    grid-template-rows: repeat(8, minmax(0, 1fr));
    }

    .grid-rows-9 {
    grid-template-rows: repeat(9, minmax(0, 1fr));
    }

    .grid-rows-10 {
    grid-template-rows: repeat(10, minmax(0, 1fr));
    }

    .grid-rows-11 {
    grid-template-rows: repeat(11, minmax(0, 1fr));
    }

    .grid-rows-12 {
    grid-template-rows: repeat(12, minmax(0, 1fr));
    }

    .grid-rows-13 {
    grid-template-rows: repeat(13, minmax(0, 1fr));
    }

    .grid-rows-14 {
    grid-template-rows: repeat(14, minmax(0, 1fr));
    }

    .grid-rows-15 {
    grid-template-rows: repeat(15, minmax(0, 1fr));
    }

    .grid-rows-16 {
    grid-template-rows: repeat(16, minmax(0, 1fr));
    }

    .grid-rows-17 {
    grid-template-rows: repeat(17, minmax(0, 1fr));
    }

    .grid-rows-18 {
    grid-template-rows: repeat(18, minmax(0, 1fr));
    }

    .grid-rows-19 {
    grid-template-rows: repeat(19, minmax(0, 1fr));
    }

    .grid-rows-20 {
    grid-template-rows: repeat(20, minmax(0, 1fr));
    }

    .grid-rows-21 {
    grid-template-rows: repeat(21, minmax(0, 1fr));
    }

    .grid-rows-22 {
    grid-template-rows: repeat(22, minmax(0, 1fr));
    }

    .grid-rows-23 {
    grid-template-rows: repeat(23, minmax(0, 1fr));
    }

    .grid-rows-24 {
    grid-template-rows: repeat(24, minmax(0, 1fr));
    }

    /* ------------------- Grid columns Start/End */
    .col-span-1 {
    grid-column: span 1/span 1;
    }

    .col-start-1 {
    grid-column-start: 1;
    }

    .col-end-1 {
    grid-column-end: 1;
    }

    .col-span-2 {
    grid-column: span 2/span 2;
    }

    .col-start-2 {
    grid-column-start: 2;
    }

    .col-end-2 {
    grid-column-end: 2;
    }

    .col-span-3 {
    grid-column: span 3/span 3;
    }

    .col-start-3 {
    grid-column-start: 3;
    }

    .col-end-3 {
    grid-column-end: 3;
    }

    .col-span-4 {
    grid-column: span 4/span 4;
    }

    .col-start-4 {
    grid-column-start: 4;
    }

    .col-end-4 {
    grid-column-end: 4;
    }

    .col-span-5 {
    grid-column: span 5/span 5;
    }

    .col-start-5 {
    grid-column-start: 5;
    }

    .col-end-5 {
    grid-column-end: 5;
    }

    .col-span-6 {
    grid-column: span 6/span 6;
    }

    .col-start-6 {
    grid-column-start: 6;
    }

    .col-end-6 {
    grid-column-end: 6;
    }

    .col-span-7 {
    grid-column: span 7/span 7;
    }

    .col-start-7 {
    grid-column-start: 7;
    }

    .col-end-7 {
    grid-column-end: 7;
    }

    .col-span-8 {
    grid-column: span 8/span 8;
    }

    .col-start-8 {
    grid-column-start: 8;
    }

    .col-end-8 {
    grid-column-end: 8;
    }

    .col-span-9 {
    grid-column: span 9/span 9;
    }

    .col-start-9 {
    grid-column-start: 9;
    }

    .col-end-9 {
    grid-column-end: 9;
    }

    .col-span-10 {
    grid-column: span 10/span 10;
    }

    .col-start-10 {
    grid-column-start: 10;
    }

    .col-end-10 {
    grid-column-end: 10;
    }

    .col-span-11 {
    grid-column: span 11/span 11;
    }

    .col-start-11 {
    grid-column-start: 11;
    }

    .col-end-11 {
    grid-column-end: 11;
    }

    .col-span-12 {
    grid-column: span 12/span 12;
    }

    .col-start-12 {
    grid-column-start: 12;
    }

    .col-end-12 {
    grid-column-end: 12;
    }

    .col-span-13 {
    grid-column: span 13/span 13;
    }

    .col-start-13 {
    grid-column-start: 13;
    }

    .col-end-13 {
    grid-column-end: 13;
    }

    .col-span-14 {
    grid-column: span 14/span 14;
    }

    .col-start-14 {
    grid-column-start: 14;
    }

    .col-end-14 {
    grid-column-end: 14;
    }

    .col-span-15 {
    grid-column: span 15/span 15;
    }

    .col-start-15 {
    grid-column-start: 15;
    }

    .col-end-15 {
    grid-column-end: 15;
    }

    .col-span-16 {
    grid-column: span 16/span 16;
    }

    .col-start-16 {
    grid-column-start: 16;
    }

    .col-end-16 {
    grid-column-end: 16;
    }

    .col-span-17 {
    grid-column: span 17/span 17;
    }

    .col-start-17 {
    grid-column-start: 17;
    }

    .col-end-17 {
    grid-column-end: 17;
    }

    .col-span-18 {
    grid-column: span 18/span 18;
    }

    .col-start-18 {
    grid-column-start: 18;
    }

    .col-end-18 {
    grid-column-end: 18;
    }

    .col-span-19 {
    grid-column: span 19/span 19;
    }

    .col-start-19 {
    grid-column-start: 19;
    }

    .col-end-19 {
    grid-column-end: 19;
    }

    .col-span-20 {
    grid-column: span 20/span 20;
    }

    .col-start-20 {
    grid-column-start: 20;
    }

    .col-end-20 {
    grid-column-end: 20;
    }

    .col-span-21 {
    grid-column: span 21/span 21;
    }

    .col-start-21 {
    grid-column-start: 21;
    }

    .col-end-21 {
    grid-column-end: 21;
    }

    .col-span-22 {
    grid-column: span 22/span 22;
    }

    .col-start-22 {
    grid-column-start: 22;
    }

    .col-end-22 {
    grid-column-end: 22;
    }

    .col-span-23 {
    grid-column: span 23/span 23;
    }

    .col-start-23 {
    grid-column-start: 23;
    }

    .col-end-23 {
    grid-column-end: 23;
    }

    .col-span-24 {
    grid-column: span 24/span 24;
    }

    .col-start-24 {
    grid-column-start: 24;
    }

    .col-end-24 {
    grid-column-end: 24;
    }

    /* ------------------- Grid rows Start/End */
    .row-span-1 {
    grid-row: span 1/span 1;
    }

    .row-start-1 {
    grid-row-start: 1;
    }

    .row-end-1 {
    grid-row-end: 1;
    }

    .row-span-2 {
    grid-row: span 2/span 2;
    }

    .row-start-2 {
    grid-row-start: 2;
    }

    .row-end-2 {
    grid-row-end: 2;
    }

    .row-span-3 {
    grid-row: span 3/span 3;
    }

    .row-start-3 {
    grid-row-start: 3;
    }

    .row-end-3 {
    grid-row-end: 3;
    }

    .row-span-4 {
    grid-row: span 4/span 4;
    }

    .row-start-4 {
    grid-row-start: 4;
    }

    .row-end-4 {
    grid-row-end: 4;
    }

    .row-span-5 {
    grid-row: span 5/span 5;
    }

    .row-start-5 {
    grid-row-start: 5;
    }

    .row-end-5 {
    grid-row-end: 5;
    }

    .row-span-6 {
    grid-row: span 6/span 6;
    }

    .row-start-6 {
    grid-row-start: 6;
    }

    .row-end-6 {
    grid-row-end: 6;
    }

    .row-span-7 {
    grid-row: span 7/span 7;
    }

    .row-start-7 {
    grid-row-start: 7;
    }

    .row-end-7 {
    grid-row-end: 7;
    }

    .row-span-8 {
    grid-row: span 8/span 8;
    }

    .row-start-8 {
    grid-row-start: 8;
    }

    .row-end-8 {
    grid-row-end: 8;
    }

    .row-span-9 {
    grid-row: span 9/span 9;
    }

    .row-start-9 {
    grid-row-start: 9;
    }

    .row-end-9 {
    grid-row-end: 9;
    }

    .row-span-10 {
    grid-row: span 10/span 10;
    }

    .row-start-10 {
    grid-row-start: 10;
    }

    .row-end-10 {
    grid-row-end: 10;
    }

    .row-span-11 {
    grid-row: span 11/span 11;
    }

    .row-start-11 {
    grid-row-start: 11;
    }

    .row-end-11 {
    grid-row-end: 11;
    }

    .row-span-12 {
    grid-row: span 12/span 12;
    }

    .row-start-12 {
    grid-row-start: 12;
    }

    .row-end-12 {
    grid-row-end: 12;
    }

    .row-span-13 {
    grid-row: span 13/span 13;
    }

    .row-start-13 {
    grid-row-start: 13;
    }

    .row-end-13 {
    grid-row-end: 13;
    }

    .row-span-14 {
    grid-row: span 14/span 14;
    }

    .row-start-14 {
    grid-row-start: 14;
    }

    .row-end-14 {
    grid-row-end: 14;
    }

    .row-span-15 {
    grid-row: span 15/span 15;
    }

    .row-start-15 {
    grid-row-start: 15;
    }

    .row-end-15 {
    grid-row-end: 15;
    }

    .row-span-16 {
    grid-row: span 16/span 16;
    }

    .row-start-16 {
    grid-row-start: 16;
    }

    .row-end-16 {
    grid-row-end: 16;
    }

    .row-span-17 {
    grid-row: span 17/span 17;
    }

    .row-start-17 {
    grid-row-start: 17;
    }

    .row-end-17 {
    grid-row-end: 17;
    }

    .row-span-18 {
    grid-row: span 18/span 18;
    }

    .row-start-18 {
    grid-row-start: 18;
    }

    .row-end-18 {
    grid-row-end: 18;
    }

    .row-span-19 {
    grid-row: span 19/span 19;
    }

    .row-start-19 {
    grid-row-start: 19;
    }

    .row-end-19 {
    grid-row-end: 19;
    }

    .row-span-20 {
    grid-row: span 20/span 20;
    }

    .row-start-20 {
    grid-row-start: 20;
    }

    .row-end-20 {
    grid-row-end: 20;
    }

    .row-span-21 {
    grid-row: span 21/span 21;
    }

    .row-start-21 {
    grid-row-start: 21;
    }

    .row-end-21 {
    grid-row-end: 21;
    }

    .row-span-22 {
    grid-row: span 22/span 22;
    }

    .row-start-22 {
    grid-row-start: 22;
    }

    .row-end-22 {
    grid-row-end: 22;
    }

    .row-span-23 {
    grid-row: span 23/span 23;
    }

    .row-start-23 {
    grid-row-start: 23;
    }

    .row-end-23 {
    grid-row-end: 23;
    }

    .row-span-24 {
    grid-row: span 24/span 24;
    }

    .row-start-24 {
    grid-row-start: 24;
    }

    .row-end-24 {
    grid-row-end: 24;
    }

    /* ------------------- Grid columns Flow */
    .grid-cols-none {
    grid-template-columns: none;
    }

    .grid-flow-col {
    grid-auto-flow: column;
    }

    .grid-flow-col-dense {
    grid-auto-flow: column dense;
    }

    .auto-cols-auto {
    grid-auto-columns: auto;
    }

    .auto-cols-min {
    grid-auto-columns: min-content;
    }

    .auto-cols-max {
    grid-auto-columns: max-content;
    }

    .auto-cols-fr {
    grid-auto-columns: minmax(0, 1fr);
    }

    /* ------------------- Grid rows Flow */
    .grid-rows-none {
    grid-template-rows: none;
    }

    .grid-flow-row {
    grid-auto-flow: row;
    }

    .grid-flow-row-dense {
    grid-auto-flow: row dense;
    }

    .auto-rows-auto {
    grid-auto-rows: auto;
    }

    .auto-rows-min {
    grid-auto-rows: min-content;
    }

    .auto-rows-max {
    grid-auto-rows: max-content;
    }

    .auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
    }

    .grid-flow-dense {
    grid-auto-flow: dense;
    }

    /* ------------------- Grid Order */
    .order-1 {
    order: 1;
    }

    .order-2 {
    order: 2;
    }

    .order-3 {
    order: 3;
    }

    .order-4 {
    order: 4;
    }

    .order-5 {
    order: 5;
    }

    .order-6 {
    order: 6;
    }

    .order-7 {
    order: 7;
    }

    .order-8 {
    order: 8;
    }

    .order-9 {
    order: 9;
    }

    .order-10 {
    order: 10;
    }

    .order-11 {
    order: 11;
    }

    .order-12 {
    order: 12;
    }

    .order-13 {
    order: 13;
    }

    .order-14 {
    order: 14;
    }

    .order-15 {
    order: 15;
    }

    .order-16 {
    order: 16;
    }

    .order-17 {
    order: 17;
    }

    .order-18 {
    order: 18;
    }

    .order-19 {
    order: 19;
    }

    .order-20 {
    order: 20;
    }

    .order-21 {
    order: 21;
    }

    .order-22 {
    order: 22;
    }

    .order-23 {
    order: 23;
    }

    .order-24 {
    order: 24;
    }

    .order-first {
    order: -9999;
    }

    .order-last {
    order: 9999;
    }

    .order-none {
    order: 0;
    }

    /* ------------------- Grid Gap */
    .gap-xxxSmall {
    gap: $spacing-xxxSmall;
    }

    .gap-x-xxxSmall {
    column-gap: $spacing-xxxSmall;
    }

    .gap-y-xxxSmall {
    row-gap: $spacing-xxxSmall;
    }

    .gap-small {
    gap: $spacing-small;
    }

    .gap-x-small {
    column-gap: $spacing-small;
    }

    .gap-y-small {
    row-gap: $spacing-small;
    }

    .gap-xxSmall {
    gap: $spacing-xxSmall;
    }

    .gap-x-xxSmall {
    column-gap: $spacing-xxSmall;
    }

    .gap-y-xxSmall {
    row-gap: $spacing-xxSmall;
    }

    .gap-xSmall {
    gap: $spacing-xSmall;
    }

    .gap-x-xSmall {
    column-gap: $spacing-xSmall;
    }

    .gap-y-xSmall {
    row-gap: $spacing-xSmall;
    }

    .gap-small {
    gap: $spacing-small;
    }

    .gap-x-small {
    column-gap: $spacing-small;
    }

    .gap-y-small {
    row-gap: $spacing-small;
    }

    .gap-normal {
    gap: $spacing-normal;
    }

    .gap-x-normal {
    column-gap: $spacing-normal;
    }

    .gap-y-normal {
    row-gap: $spacing-normal;
    }

    .gap-average {
    gap: $spacing-average;
    }

    .gap-x-average {
    column-gap: $spacing-average;
    }

    .gap-y-average {
    row-gap: $spacing-average;
    }

    .gap-xLarge {
    gap: $spacing-xLarge;
    }

    .gap-x-xLarge {
    column-gap: $spacing-xLarge;
    }

    .gap-y-xLarge {
    row-gap: $spacing-xLarge;
    }

    .gap-xxLarge {
    gap: $spacing-xxLarge;
    }

    .gap-x-xxLarge {
    column-gap: $spacing-xxLarge;
    }

    .gap-y-xxLarge {
    row-gap: $spacing-xxLarge;
    }

    .gap-big {
    gap: $spacing-big;
    }

    .gap-x-big {
    column-gap: $spacing-big;
    }

    .gap-y-big {
    row-gap: $spacing-big;
    }

    .gap-large {
    gap: $spacing-large;
    }

    .gap-x-large {
    column-gap: $spacing-large;
    }

    .gap-y-large {
    row-gap: $spacing-large;
    }

    .gap-huge {
    gap: $spacing-huge;
    }

    .gap-x-huge {
    column-gap: $spacing-huge;
    }

    .gap-y-huge {
    row-gap: $spacing-huge;
    }

    /* ------------------- Grid Align/Justify */
    .justify-normal {
    justify-content: normal;
    }

    .justify-start {
    justify-content: flex-start;
    }

    .justify-end {
    justify-content: flex-end;
    }

    .justify-center {
    justify-content: center;
    }

    .justify-between {
    justify-content: space-between;
    }

    .justify-around {
    justify-content: space-around;
    }

    .justify-evenly {
    justify-content: space-evenly;
    }

    .justify-stretch {
    justify-content: stretch;
    }

    .justify-items-start {
    justify-items: start;
    }

    .justify-items-end {
    justify-items: end;
    }

    .justify-items-center {
    justify-items: center;
    }

    .justify-items-stretch {
    justify-items: stretch;
    }

    .justify-self-auto {
    justify-self: auto;
    }

    .justify-self-start {
    justify-self: start;
    }

    .justify-self-end {
    justify-self: end;
    }

    .justify-self-center {
    justify-self: center;
    }

    .justify-self-stretch {
    justify-self: stretch;
    }

    .content-normal {
    align-content: normal;
    }

    .content-center {
    align-content: center;
    }

    .content-start {
    align-content: flex-start;
    }

    .content-end {
    align-content: flex-end;
    }

    .content-between {
    align-content: space-between;
    }

    .content-around {
    align-content: space-around;
    }

    .content-evenly {
    align-content: space-evenly;
    }

    .content-baseline {
    align-content: baseline;
    }

    .content-stretch {
    align-content: stretch;
    }

    .items-start {
    align-items: flex-start;
    }

    .items-end {
    align-items: flex-end;
    }

    .items-center {
    align-items: center;
    }

    .items-baseline {
    align-items: baseline;
    }

    .items-stretch {
    align-items: stretch;
    }

    .self-auto {
    align-self: auto;
    }

    .self-start {
    align-self: flex-start;
    }

    .self-end {
    align-self: flex-end;
    }

    .self-center {
    align-self: center;
    }

    .self-stretch {
    align-self: stretch;
    }

    .self-baseline {
    align-self: baseline;
    }

    .place-content-center {
    place-content: center;
    }

    .place-content-start {
    place-content: start;
    }

    .place-content-end {
    place-content: end;
    }

    .place-content-between {
    place-content: space-between;
    }

    .place-content-around {
    place-content: space-around;
    }

    .place-content-evenly {
    place-content: space-evenly;
    }

    .place-content-baseline {
    place-content: baseline;
    }

    .place-content-stretch {
    place-content: stretch;
    }

    .place-items-start {
    place-items: start;
    }

    .place-items-end {
    place-items: end;
    }

    .place-items-center {
    place-items: center;
    }

    .place-items-baseline {
    place-items: baseline;
    }

    .place-items-stretch {
    place-items: stretch;
    }

    .place-self-auto {
    place-self: auto;
    }

    .place-self-start {
    place-self: start;
    }

    .place-self-end {
    place-self: end;
    }

    .place-self-center {
    place-self: center;
    }

    .place-self-stretch {
    place-self: stretch;
    }
    9 changes: 9 additions & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    {
    "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
    },
    "autoprefixer": false
    }