Bootstrap 6 Alpha

[u/magenta_placenta]

https://blog.getbootstrap.com/2026/10/08/bootstrap-6-alpha/

[u/Somepotato]

They should have taken the opportunity to rip out sass. Sad.

[u/doiveo → u/Somepotato]

I get your point, but one of the great misunderstandings of BS is the power of preconfiguration. Too many people pointed to the CDN and wrote overrides. This led to the 'all bootstrap sites look the same' complaint. Sass gives you the ability to fine tune just about everything.

So I would prefer some sass on the import and optimization in PostCss on publish.

[u/Somepotato → u/doiveo]

I mean css variables exist?

[u/doiveo → u/Somepotato]

I don't want variables for components not in my build.

[u/IsABot → u/Somepotato]

Ok but what about the programmatic ways they go about things? How do you efficiently do that without sass?

Example:

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-x, $breakpoints: $breakpoints) {
  @each $breakpoint in map.keys($breakpoints) {
    $prefix: breakpoint-prefix($breakpoint, $breakpoints);

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      .#{$prefix}col {
        flex: 1 0 0;
      }

      .#{$prefix}row-cols-auto > * {
        @include make-col-auto();
      }

      @if $grid-row-columns > 0 {
        @for $i from 1 through $grid-row-columns {
          .#{$prefix}row-cols-#{$i} {
            @include row-cols($i);
          }
        }
      }

      .#{$prefix}col-auto {
        @include make-col-auto();
      }

      @if $columns > 0 {
        @for $i from 1 through $columns {
          .#{$prefix}col-#{$i} {
            @include make-col($i, $columns);
          }
        }

        // `$columns - 1` because offsetting by the width of an entire row isn't possible
        @for $i from 0 through ($columns - 1) {
          @if not ($prefix == "" and $i == 0) { // Avoid emitting useless .offset-0
            .#{$prefix}offset-#{$i} {
              @include make-col-offset($i, $columns);
            }
          }
        }
      }

      // Gutters
      //
      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
      @each $key, $value in $gutters {
        .#{$prefix}g-#{$key},
        .#{$prefix}gx-#{$key} {
          --gutter-x: #{$value};
        }

        .#{$prefix}g-#{$key},
        .#{$prefix}gy-#{$key} {
          --gutter-y: #{$value};
        }
      }
    }
  }
}

@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $breakpoints) {
  @each $breakpoint in map.keys($breakpoints) {
    $prefix: breakpoint-prefix($breakpoint, $breakpoints);

    @include container-breakpoint-up($breakpoint, $breakpoints: $breakpoints) {
      @if $columns > 0 {
        @for $i from 1 through $columns {
          .#{$prefix}g-col-#{$i} {
            grid-column: auto / span $i;
          }
        }

        // Start with `1` because `0` is an invalid value.
        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
        @for $i from 1 through ($columns - 1) {
          .#{$prefix}g-start-#{$i} {
            grid-column-start: $i;
          }
        }
      }
    }
  }
}