Есть ли способ добавить единицу «px» в массив параметров для миксинов Sass?

Вот мое текущее решение, но оно не кажется оптимальным, так как будет приводить к ошибкам, если в $Slice меньше четырех элементов. Мне интересно, есть ли лучший способ справиться с этим.

@mixin nine-border-slice($imagePath, $slice) {
    $width: nth($slice, 1)+0px nth($slice, 2)+0px nth($slice, 3)+0px nth($slice, 4)+0px;
    border-image-source: url($imagePath);
    border-image-slice: $slice fill;
    border-width: $width;
    border-style: solid;
}

@include nine-border-slice('../stories/assets/speech_bubble.png', 19 44 95 25);

// border-image-source: url('../stories/assets/speech_bubble.png');
// border-image-slice: 19 44 95 25 fill;
// border-width: 19px 44px 95px 25px;
// border-style: solid;

@include nine-border-slice('../stories/assets/speech_bubble.png', 19 44 95 );

// border-image-source: url('../stories/assets/speech_bubble.png');
// border-image-slice: 19 44 95 fill;
// border-width: 19px 44px 95px;
// border-style: solid;

css sass

19.04.2023 12:40

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

161

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

Ответы 1

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

Лучшим решением является цикл по массиву $slice и добавление px к каждому значению массива, вы можете использовать цикл @for для достижения этого:

@mixin nine-border-slice($imagePath, $slice) {
  $width: ();
  @for $i from 1 through length($slice) {
    $width: append($width, nth($slice, $i) + px);
  }
  border-image-source: url($imagePath);
  border-image-slice: $slice fill;
  border-width: $width;
  border-style: solid;
}

19.04.2023 13:20

Другие вопросы по теме

Sass математическая функция с интерполяцией

Могу ли я разделить свои правила загрузчика веб-пакетов CSS / SASS или они должны быть одним большим правилом?

Динамический встроенный стиль в vue с помощью переменных sass

Отключить прокрутку при навигации со стрелками вверх и вниз

Внутренняя ошибка Nuxt 3 SCSS после каждого сохранения или создания нового файла SCSS

Svelte SMUI, получение цветов темы в javascript

Как стилизовать дочерние элементы внутри родительского элемента с прорезями?

Изменение непрозрачности цвета фона путем преобразования цвета в rgba

Как создать заголовки от H1 до H6, используя Sass в CSS с уменьшенным размером шрифта

Не удалось скомпилировать «sass» при попытке установить пакет с помощью R

Есть ли способ добавить единицу «px» в массив параметров для миксинов Sass?

Ответы 1

Другие вопросы по теме

Похожие вопросы