How do variables and loops work in scss + bootstrap (Analysis of the site code. I don’t understand how it works)?

Question

css

Hello. There is a site https://www.supermarket.ie/category/health-beauty. Through the element code, the scroll-main-pane
id has .gutters-3 > .col, .gutters-3 > [class*="col-"] on the 39th line of style, which have padding in rem units. I need to fix them, but when I open this very line 39, I see the following.

@for $i from 1 through $grid-columns {
  .grid-template-col-#{$i} {
    grid-template-columns: repeat(#{$i}, 1fr);
  }
  .grid-template-row-#{$i} {
    grid-template-rows: repeat(#{$i}, 1fr);
  }
  .grid-column-start-#{$i} {
    grid-column-start: $i;
  }
  .grid-column-end-#{$i} {
    grid-column-end: $i;
  }
  .grid-row-start-#{$i} {
    grid-row-start: $i;
  }
  .grid-row-end-#{$i} {
    grid-row-end: $i;
  }
}

What it is ?

Answer 1

In the browser, you are viewing an already compiled css file, and here you have brought a piece of sass. Either look further, through the rest of the sass files, or just override the properties of this class separately at the end.