'How to use @extend for class that using numbers? (Migrating from bootstrap 4 to 5)

i want to do migration for some classes from bootstrap 4 to 5,, because some of bootstrap classes is no longer can be used, such on utilities,, i'm using SASS so i can use @extend

enter image description here

for class .text-left and .text-right, i can easily @extend them

.text-left {
  @extend .text-start;
}

.text-right {
  @extend .text-end;
}

but for class (.ml- and .mr-) or (.pl- and .pr-) i have no idea how to do that without inserting them one bye one such .ml-1, .ml-2, etc.. Is there any idea how to put them only using one @extend instead of multiple @extend?

csstwitter-bootstrapbootstrap-4sassbootstrap-5


Solution 1:[1]

Solved, i use looping @for as written on this guide https://sass-lang.com/documentation/at-rules/control/for

@for $i from 1 through 5 {
  .ml-#{$i} {
    @extend .ms-#{$i};
  }
}

Solution 2:[2]

You can use BS5 API to change utilities class names:

$utilities: (
  "margin-end": (
    responsive: true,
    property: margin-right,
    // BS5 me-* classes become mr-*
    class: mr,
    values: map-merge($spacers, (auto: auto))
  ),
  "margin-start": (
    responsive: true,
    property: margin-left,
    // BS5 ms-* classes become ml-*
    class: ml,
    values: map-merge($spacers, (auto: auto))
  ),
  // ...other utilities
);

Place custom $utilities above importing BS5 utilities file (@import "~bootstrap/scss/utilities") to update this utilities;

In this case you don't have to extend new BS5 classes in your code.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Muhammad Jafar
Solution 2 Yaroslav Trach

Related Questions