Generated by SassMeister.com.

input.scss

// These are the mixins

@mixin grid-layout($column-count, $column-gap: 3rem, $row-gap: null) {
    $row-gap: if($row-gap == null, $column-gap, $row-gap);

    display: grid;
    grid-template-columns: repeat($column-count, 1fr);
    grid-gap: $row-gap $column-gap;
    gap: $row-gap $column-gap;
}

@mixin grid-column-start($number) {
    grid-column-start: $number;
}

@mixin grid-row-start($number) {
    grid-row-start: $number;
}

@mixin grid-column-span($count) {
    grid-column-end: span $count;
}

@mixin grid-row-span($count) {
    grid-row-end: span $count;
}

// And this is how to use them

.grid-container {
    @include grid-layout(12, 2rem); // The $row-gap will automatically be the same as $column-gap if you omit it
}

.grid-item {
    @include grid-column-start(2);
    @include grid-column-span(4);
}

output.css

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2rem 2rem;
  gap: 2rem 2rem;
}

.grid-item {
  grid-column-start: 2;
  grid-column-end: span 4;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}