SASS работа со строками

171
11 октября 2018, 07:50

День добрый. Пишу миксины для работы GRID в IE11

@mixin grid-template-columns($args, $gap) {
  -ms-grid-columns: $args;
  grid-template-columns: $args;
  grid-gap: $gap;
}

В -ms-grid-columns, если в $args больше одного параметра нужно после каждого, кроме последнего подставить $gap. Самому ума не хватает.

Пример использования:

#content_grid {
  @include grid-template-columns(1fr 25% 25%, 10px);
}

Должно получиться так:

#content_grid {
  -ms-grid-columns: 1fr 10px 25% 10px 25%;
  grid-template-columns: 1fr 25% 25%;
  grid-gap: 10px;
}

Пример без поддержки IE

https://codepen.io/mourat-boutry/pen/wxmpOx

Answer 1

Так как Sass предоставляет не много методов для работы со списками значений, можно создать новый список и заполнить его на основе $args, вставляя после каждого элемента $gap.

Создать новый список можно объявив переменную, например:

$list: ();

Для прохода по списку $args можно воспользоваться циклом @for.

@for $i from 1 through length($args) {

Внутри цикла получаем значение текущего элемента с помощью функции nth

$arg: nth($args, $i);

Добавляем это значение с помощью функции append

$list: append($list, $arg);

Чтобы не добавлять $gap после последнего элемента нужно проверить условие, что текущий индекс меньше длины списка

@if $i < length($args){

И если это так, добавить $gap с помощью функции append

Далее для свойства просто использовать значение $list

-ms-grid-columns: $list;

Пример в сборе:

@mixin grid-template-columns($args, $gap) {
  $list: ();
  @for $i from 1 through length($args) {
    $arg: nth($args, $i);
    $list: append($list, $arg);
    @if $i < length($args){
      $list: append($list, $gap);
    }
  }
  -ms-grid-columns: $list;
  grid-template-columns: $args;
  grid-gap: $gap;
}
READ ALSO
gulp-sass. Как отменить вставку строки @charset &ldquo;UTF-8&rdquo;?

gulp-sass. Как отменить вставку строки @charset “UTF-8”?

При компиляции "[style]scss" gulp-sass автоматом вставляет первой строкой @charset "UTF-8"

197
Масштабирование изображения спрайта

Масштабирование изображения спрайта

Суть: есть спрайт и на нём не в масштабе пикчаПодскажите, пожалуйста, есть ли способ масштабировать итоговое изображение спрайта (уменьшить/вписать...

196
BEM и базовые теги

BEM и базовые теги

Есть теги которые часто используются и имеют один стиль (например <p>, <h1>, <li>)

169
Прокрутить блок fixsed

Прокрутить блок fixsed

На странице появляется блок div, и чтобы он появлялся в любом участке длинной страницы, ему придали позицию fixedВысота этого блока может быть...

190