Как сделать систему сетки на основе sass с небольшими и большими колоннами - PullRequest
Новая
       9

Как сделать систему сетки на основе sass с небольшими и большими колоннами

0 голосов
/ 28 июня 2018

Не могу найти то, что ищу в Google. Я пытаюсь настроить адаптивную сеточную систему, которая использует столбцы, такие как foundation или bootstrap. В основном я хочу выполнить column column-med column-lg, но я не понимаю, как column-med должен переопределять column-lg при изменении точек останова. Я знаю, что это должна быть точка останова, но я хочу использовать для этого карту sass, а не иметь кучу медиа-запросов. Может ли кто-нибудь указать мне правильное направление здесь?

1 Ответ

0 голосов
/ 29 июня 2018

Сначала вам нужно создать миксин для медиа-запросов. Что-то вроде: 

@mixin small {
    @media screen and (min-width: 768px) {
        @content;
    }
}
@mixin medium {
    @media screen and (min-width: 1024px) {
        @content;
    }
}

Сделайте то же самое для любых размеров, которые вы хотите. Чтобы вызвать этот миксин в вашем файле .scss, вы должны сделать следующее. 

@include small {
  //Your css rules here
}

@include small {
  //Your css rules here
}

Для создания сетки вы хотите использовать flexbox для создания ваших столбцов. Сначала начните со столбцов по умолчанию. 

.col {
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
  padding-left: 10px;
  padding-left: 10px;
  box-sizing: border-box; //so that the padding is included in the size
}

.col-6 {
  flex-basis: 50%;
  max-width: 50%;
}

Таким образом, получим два столбца для окна любого размера с классами 'col' и 'col-6'. Кроме того, вам не нужно использовать класс 'col', если вам не нужны желоба.

Затем создайте классы с медиазапросами. 

@include small {
  .col-sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
}

@include medium {
  .col-md-4 {
    flex-basis: 33.333333%;
    max-width: 33.333333%;
  }
}

Вот и все. Просто добавьте классы 'col' и 'col-sm-6' и 'col-md-4', у вас будет один столбец шириной от 0 до 767 пикселей, два от 768 до 1023 и три от 1024 +.

...