Галерея Susy с AngularJS (ng-repeat) - не заполняет пробелы из ng-hide

Question

Я использую инструмент галереи Сьюзи для отображения элементов в формате сетки. Angular скрывает или показывает эти элементы сетки на лету, в зависимости от выбора пользователя. Когда Angular скрывает элемент в сетке, он присоединяет класс ng-hide к этому. Это в свою очередь устанавливает его CSS в display:none !important,

Проблема в том, что Сьюзи рассчитывает положение каждого элемента, а не принимает во внимание элементы, установленные для display:none - это оставляет пробелы в сетке, когда эти элементы скрыты.

Можно ли заставить Сьюзи игнорировать скрытые элементы при их раскладке?

Я пытался использовать :not() Селектор CSS, но безуспешно - в макете все еще есть пробелы:

.results__result:not(.ng-hide) {
    @include gallery(3 of 12);
}

Answer 1

Сасс ничего не знает о DOM, поэтому Сьюзи тоже не знает. Для создания макета галереи Сьюзи полагается на nth-child селекторы - которые не работают хорошо для варианта использования, о котором вы говорите. Начните с простого:

.results__result {
  @include span(3 of 12);
}

Если вы используете split, inside, или же inside-static желоба - это должно просто работать. В противном случае вам нужно каким-то образом нацелиться на last элемент в каждом ряду сетки. У CSS нет способа нацеливания на nth-visible, поэтому для этого потребуется дополнительная логика в вашей разметке /js. Учитывая last Класс каждого 4-го видимого результата, вы можете добавить:

.last {
  @include last;
}