Как работают переменные и циклы в связке scss + bootstrap (Разбор кода сайта. Не пойму, как работает)?

Question

[Evtera]

Здравствуйте. Есть сайт https://www.supermarket.ie/category/health-beauty. Через код элемента у айди scroll-main-pane
на 39 строчке стилей присутствует .gutters-3 > .col, .gutters-3 > [class*="col-"] , у которых присвоены padding в rem единицах. Мне их нужно исправить, но при открытии этой самой 39 строки я вижу следующее.

@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;
  }
}

Что это такое ?

Comments

[n1ksON]

хрень какая-то

Answer 1

[Кирилл Никитин]

В браузере вы просматриваете уже скомпилированный css файл, а тут привели кусок sass. Либо ищите дальше, по остальным sass файлам, либо просто переопределите свойства этого класса отдельно в конце.

Comments

[Evtera]

то есть в каком-то из sass файлов должен быть этот класс с заданными параметрами?

[Кирилл Никитин]

Evtera, ну конечно, от куда-то оно берётся. Вернее, это скорее всего переменная, а не класс как в css. Возможно, в _variables.scss. Посмотрите. Но вы ведь в курсе, что тогда вам надо будет заново пересобирать всё?

[Evtera]

Кирилл Никитин, Спасибо за идею, буду искать.