Добавить столбцы в сетку из переменной с помощью scss

Можно ли сделать количество столбцов в столбцах сетки-шаблона из переменной?

У меня есть переменная $num-of-cols: 5; Это я использую для создания классов с помощью scss, и оно отлично работает, но я также хочу использовать ту же переменную для создания столбцов для столбцов сетки-шаблона.
Например: grid-template-columns: [col-1] $width-cols [col-2] $width-cols [col-3] $width-cols [col-4] $width-cols [col-5] $ ширина-столбцы [столбец-6];
$width-cols должен рассчитываться как 100%/$num-of-cols-$grid-gutter-width. (Имена важны и идут от 1 до $num-of-cols).

$grid-gutter-width: 1rem;
$num-of-cols: 5;
$width-cols: calc(100%/#{$num-of-cols} - #{$grid-gutter-width});
.grid {
    display: grid;
    grid-gap: $grid-gutter-width;
    padding: $grid-gutter-width;
    padding-right: 0;
    grid-template-columns: [col-1] $width-cols [col-2] $width-cols [col-3] $width-cols [col-4] $width-cols [col-5] $width-cols [col-6];
    grid-template-rows: auto;
}

sass

29.05.2019 07:53

Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации

Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...

253

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать миксин (или функцию), например:

СКСС

$grid-gutter-width: 1rem;
$num-of-cols: 5;
$width-cols: calc(100%/#{$num-of-cols} - #{$grid-gutter-width});
@mixin grid-template-columns {
    $columns: [col-1],;  // note trailing comma indicates list  
    @for $i from 2 through $num-of-cols + 1 {
        $columns: append($columns, $width-cols [col-#{$i}], space);
    }
    grid-template-columns: $columns;
}



.grid {
    display: grid;
    grid-gap: $grid-gutter-width;
    padding: $grid-gutter-width;
    padding-right: 0;
    @include grid-template-columns; // <= include 
    grid-template-rows: auto;
}

CSS

.grid {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  padding-right: 0;
  grid-template-columns: [col-1] calc(100%/5 - 1rem) [col-2] calc(100%/5 - 1rem) [col-3] calc(100%/5 - 1rem) [col-4] calc(100%/5 - 1rem) [col-5] calc(100%/5 - 1rem) [col-6];
  grid-template-rows: auto;
}

Спасибо! Я был на правильном пути, но пропустил функцию добавления.

— 03.06.2019 08:21

29.05.2019 15:45