Миксин SASS / SCSS для генерации классов сетки CSS - нужны дополнительные столбцы с пропуском в 20 пикселей для IE 11 - PullRequest
Новая
       40

Миксин SASS / SCSS для генерации классов сетки CSS - нужны дополнительные столбцы с пропуском в 20 пикселей для IE 11

0 голосов
/ 04 сентября 2018

У меня есть следующий микссин SCSS, который генерирует классы CSS от .grid1 до .grid12: 

$columns: 12;
@mixin repeat($character, $n) {
    $c: "";
    @for $i from 1 through $n {
        $c: $c + $character;
    }
    -ms-grid-columns: unquote($c);
}


// classes for defining number of equally sized (sub-)grid columns
@mixin grid-x {
    @for $i from 1 through $columns {
        .grid#{$i} {
            @include repeat(" 1fr", $i);
        }
    }
}

@include grid-x;

Сгенерированные CSS-классы выглядят так, используя libsass: 

.grid1 {
  -ms-grid-columns:  1fr;
}

.grid2 {
  -ms-grid-columns:  1fr 1fr;
}

.grid3 {
  -ms-grid-columns:  1fr 1fr 1fr;
}
...

Поскольку IE 11 не поддерживает grid-gap Я хочу вставить столбцы с пропуском 20px между столбцами в поколении.

Ожидаемый результат будет выглядеть так: 

// nothing changed for .grid1
.grid1 {
  -ms-grid-columns:  1fr;
}

.grid2 {
  -ms-grid-columns:  1fr 20px 1fr;
}

.grid3 {
  -ms-grid-columns:  1fr 20px 1fr 20px 1fr;
}
...

Простое добавление столбцов 20px в повторяющейся строке приводит к нежелательному трейлингу 20px: 

@include repeat(" 1fr 20px", $i);

Результаты в 

.grid1 {
  -ms-grid-columns:  1fr 20px;
}                        ^^^^

.grid2 {
  -ms-grid-columns:  1fr 20px 1fr 20px;
}^                                ^^^^

.grid3 {
  -ms-grid-columns:  1fr 20px 1fr 20px 1fr 20px;
}                                          ^^^^
...

Есть идеи, как получить желаемый результат, используя миксины SCSS?

Для удобства тестирования просто приклейте миксин на sassmeister .

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Я смог решить ее самостоятельно, используя @if () { } @else { }: 

$columns: 12;
@mixin repeat($character, $n) {
    $c: "";
    @for $i from 1 through $n {
      @if ($n == 1 or $i == $n) {
        $c: $c + $character;
      } @else {
        $c: $c + $character + " 20px";
      }  
    }
    -ms-grid-columns: unquote($c);
}


// classes for defining number of equally sized (sub-)grid columns
@mixin grid-x {
    @for $i from 1 through $columns {
        .grid#{$i} {
            @include repeat(" 1fr", $i);
        }
    }
}

@include grid-x;
0 голосов
/ 04 сентября 2018

Вы можете включить другую переменную для разрыва и сделать это следующим образом. 

$columns: 12;
@mixin repeat($character, $gap, $n) {
    $c: "";
    @if ($n != 1) {
      @for $i from 1 through ($n - 1) {
          $c: $c+" "+$character+" "+$gap ;
      }
    }
    $c: $c+" "+$character ;
    -ms-grid-columns: unquote($c);
}


// classes for defining number of equally sized (sub-)grid columns
@mixin grid-x {
    @for $i from 1 through $columns  {
        .grid#{$i} {
            @include repeat("1fr","20px", $i);
        }
    }
}

@include grid-x;

Это также даст вам начальный результат, если вы укажете пустую строку в пробеле:

...