Update .gitignore to exclude additional generated CSS files and add new utilities SCSS file

FoodsharingSiegen.Server/wwwroot/css/_utilities.scss

@@ -0,0 +1,72 @@
+// Breakpoints matching typical Bootstrap breakpoints
+$breakpoints: (
+  "sm": 576px,
+  "md": 768px,
+  "lg": 992px,
+  "xl": 1200px
+);
+
+// Spacer values (1 to 5) mapped to rem
+$spacers: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 1rem,
+  4: 1.5rem,
+  5: 3rem
+);
+
+@mixin generate-utilities($breakpoint: "") {
+  @each $size-key, $size-val in $spacers {
+      
+    // Padding and Margin (all sides)
+    .p#{$breakpoint}-#{$size-key} { padding: $size-val !important; }
+    .m#{$breakpoint}-#{$size-key} { margin: $size-val !important; }
+
+    // Top
+    .pt#{$breakpoint}-#{$size-key} { padding-top: $size-val !important; }
+    .mt#{$breakpoint}-#{$size-key} { margin-top: $size-val !important; }
+
+    // Right / End
+    .pr#{$breakpoint}-#{$size-key} { padding-right: $size-val !important; }
+    .mr#{$breakpoint}-#{$size-key} { margin-right: $size-val !important; }
+
+    // Bottom
+    .pb#{$breakpoint}-#{$size-key} { padding-bottom: $size-val !important; }
+    .mb#{$breakpoint}-#{$size-key} { margin-bottom: $size-val !important; }
+
+    // Left / Start
+    .pl#{$breakpoint}-#{$size-key} { padding-left: $size-val !important; }
+    .ml#{$breakpoint}-#{$size-key} { margin-left: $size-val !important; }
+
+    // X-axis (left and right)
+    .px#{$breakpoint}-#{$size-key} {
+      padding-left: $size-val !important;
+      padding-right: $size-val !important;
+    }
+    .mx#{$breakpoint}-#{$size-key} {
+      margin-left: $size-val !important;
+      margin-right: $size-val !important;
+    }
+
+    // Y-axis (top and bottom)
+    .py#{$breakpoint}-#{$size-key} {
+      padding-top: $size-val !important;
+      padding-bottom: $size-val !important;
+    }
+    .my#{$breakpoint}-#{$size-key} {
+      margin-top: $size-val !important;
+      margin-bottom: $size-val !important;
+    }
+  }
+}
+
+// 1. Generate default utilities (without breakpoint modifier)
+@include generate-utilities("");
+
+// 2. Generate utilities for each breakpoint using an @each loop
+@each $bp-name, $bp-min-width in $breakpoints {
+  @media (min-width: $bp-min-width) {
+    @include generate-utilities("-#{$bp-name}");
+  }
+}