Core Layout

input.scss

.container{
    width: 90%;
    max-width: 1400;
    margin-left: auto;
    margin-right: auto;
}

$size: (

    "xxs": 3,
    "xs": 5,
    "s": 10,
    "m": 15,
    "l": 30,
    "xl": 60,
    "xxl": 90,
    "xxxl": 120,

);

:root{
    @each $name, $value in $size {
        --#{$name}: #{$value}px ; 
    }    
}


@each $name, $value in $size {
    .p--#{$name} { padding: $value; }
    
    .p-y--#{$name} { 
        padding-top: #{$value}px; 
        padding-bottom: #{$value}px; 
    }
    
    .p-top--#{$name} { padding-top: #{$value}px; }
    .p-bottom--#{$name} { padding-bottom: #{$value}px; }

    
    .m--#{$name} { margin: #{$value}px; }

    .m-y--#{$name} { 
        margin-top: #{$value}px; 
        margin-bottom: #{$value}px; 
    }
    
    .m-top--#{$name} { margin-top: #{$value}px; }
    .m-bottom--#{$name} { margin-bottom: #{$value}px; }

    .gap--#{$name} { gap: #{$value}px; }

}

output.css

.container {
  width: 90%;
  max-width: 1400;
  margin-left: auto;
  margin-right: auto;
}

:root {
  --xxs: 3px ;
  --xs: 5px ;
  --s: 10px ;
  --m: 15px ;
  --l: 30px ;
  --xl: 60px ;
  --xxl: 90px ;
  --xxxl: 120px ;
}

.p--xxs {
  padding: 3;
}

.p-y--xxs {
  padding-top: 3;
  padding-bottom: 3;
}

.p-top--xxs {
  padding-top: 3;
}

.p-bottom--xxs {
  padding-bottom: 3;
}

.m--xxs {
  margin: 3;
}

.m-y--xxs {
  margin-top: 3;
  margin-bottom: 3;
}

.m-top--xxs {
  margin-top: 3;
}

.m-bottom--xxs {
  margin-bottom: 3;
}

.gap--xxs {
  gap: 3;
}

.p--xs {
  padding: 5;
}

.p-y--xs {
  padding-top: 5;
  padding-bottom: 5;
}

.p-top--xs {
  padding-top: 5;
}

.p-bottom--xs {
  padding-bottom: 5;
}

.m--xs {
  margin: 5;
}

.m-y--xs {
  margin-top: 5;
  margin-bottom: 5;
}

.m-top--xs {
  margin-top: 5;
}

.m-bottom--xs {
  margin-bottom: 5;
}

.gap--xs {
  gap: 5;
}

.p--s {
  padding: 10;
}

.p-y--s {
  padding-top: 10;
  padding-bottom: 10;
}

.p-top--s {
  padding-top: 10;
}

.p-bottom--s {
  padding-bottom: 10;
}

.m--s {
  margin: 10;
}

.m-y--s {
  margin-top: 10;
  margin-bottom: 10;
}

.m-top--s {
  margin-top: 10;
}

.m-bottom--s {
  margin-bottom: 10;
}

.gap--s {
  gap: 10;
}

.p--m {
  padding: 15;
}

.p-y--m {
  padding-top: 15;
  padding-bottom: 15;
}

.p-top--m {
  padding-top: 15;
}

.p-bottom--m {
  padding-bottom: 15;
}

.m--m {
  margin: 15;
}

.m-y--m {
  margin-top: 15;
  margin-bottom: 15;
}

.m-top--m {
  margin-top: 15;
}

.m-bottom--m {
  margin-bottom: 15;
}

.gap--m {
  gap: 15;
}

.p--l {
  padding: 30;
}

.p-y--l {
  padding-top: 30;
  padding-bottom: 30;
}

.p-top--l {
  padding-top: 30;
}

.p-bottom--l {
  padding-bottom: 30;
}

.m--l {
  margin: 30;
}

.m-y--l {
  margin-top: 30;
  margin-bottom: 30;
}

.m-top--l {
  margin-top: 30;
}

.m-bottom--l {
  margin-bottom: 30;
}

.gap--l {
  gap: 30;
}

.p--xl {
  padding: 60;
}

.p-y--xl {
  padding-top: 60;
  padding-bottom: 60;
}

.p-top--xl {
  padding-top: 60;
}

.p-bottom--xl {
  padding-bottom: 60;
}

.m--xl {
  margin: 60;
}

.m-y--xl {
  margin-top: 60;
  margin-bottom: 60;
}

.m-top--xl {
  margin-top: 60;
}

.m-bottom--xl {
  margin-bottom: 60;
}

.gap--xl {
  gap: 60;
}

.p--xxl {
  padding: 90;
}

.p-y--xxl {
  padding-top: 90;
  padding-bottom: 90;
}

.p-top--xxl {
  padding-top: 90;
}

.p-bottom--xxl {
  padding-bottom: 90;
}

.m--xxl {
  margin: 90;
}

.m-y--xxl {
  margin-top: 90;
  margin-bottom: 90;
}

.m-top--xxl {
  margin-top: 90;
}

.m-bottom--xxl {
  margin-bottom: 90;
}

.gap--xxl {
  gap: 90;
}

.p--xxxl {
  padding: 120;
}

.p-y--xxxl {
  padding-top: 120;
  padding-bottom: 120;
}

.p-top--xxxl {
  padding-top: 120;
}

.p-bottom--xxxl {
  padding-bottom: 120;
}

.m--xxxl {
  margin: 120;
}

.m-y--xxxl {
  margin-top: 120;
  margin-bottom: 120;
}

.m-top--xxxl {
  margin-top: 120;
}

.m-bottom--xxxl {
  margin-bottom: 120;
}

.gap--xxxl {
  gap: 120;
}

settings.json

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