День добрый. Пишу миксины для работы 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
Так как 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;
}
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
При компиляции "[style]scss" gulp-sass автоматом вставляет первой строкой @charset "UTF-8"
Суть: есть спрайт и на нём не в масштабе пикчаПодскажите, пожалуйста, есть ли способ масштабировать итоговое изображение спрайта (уменьшить/вписать...
Есть теги которые часто используются и имеют один стиль (например <p>, <h1>, <li>)
На странице появляется блок div, и чтобы он появлялся в любом участке длинной страницы, ему придали позицию fixedВысота этого блока может быть...