Выполнение математики по переменному аргументу Sass mixins

Мне нравится использовать rem единиц с пиксельными резервными копиями для моего CSS-размера и пытаюсь сделать mixins для этого. Для размера шрифта это легко:

@mixin font-size($size) {
  font-size: $size + px;
  font-size: ($size / 10) + rem;
}

Но для заполнения, поля и т.д. mixin должен принимать переменные аргументы, что возможно для документации Sass http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments

Однако, используя следующий mixin, вместо деления на 10, mixin просто добавляет косую черту между цифрами. То есть, это:

@mixin padding($padding...) {
    padding: $padding + px;
    padding: ($padding / 10) + rem;
}
.class {
    @include padding(24);
}

Выводит следующее:

.class {
    padding: 24px;
    padding: 24/10rem;
}

Вместо этого, как и я ожидал:

.class {
    padding: 24px;
    padding: 2.4rem;
}

Есть ли способ убедиться, что Sass распознает переменные как числа и поэтому правильно использует оператор деления на них?

Кроме того, после тестирования этого больше, я понял, что конкатенация происходит только в последней переменной.

Ответы

Ответ 1

Кажется, что мне действительно нужно было использовать здесь список, а не переменный аргумент, чтобы манипулировать каждым значением отдельно.

Я сначала попытался сделать это с помощью директивы @each, но не смог понять, как использовать его внутри декларации. Это вызывает ошибку:

@mixin padding($padding) {
   padding: @each $value in $padding { $value + px };
   padding: @each $value in $padding { ($value / 10) + rem };
}

Итак, я закончил писать что-то гораздо более подробное, которое обрабатывает каждый из четырех возможных случаев отдельно (т.е. вы передаете 1, 2, 3 или 4 аргумента). Это выглядит так и работает так, как я хотел:

@mixin padding($padding) {
    @if length($padding) == 1 {
        padding: $padding+px;
        padding: $padding/10+rem;
    }
    @if length($padding) == 2 {
        padding: nth($padding, 1)+px nth($padding, 2)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem;
    }
    @if length($padding) == 3 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem;
    }
    @if length($padding) == 4 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px nth($padding, 4)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem nth($padding, 4)*0.1+rem;
    }
}

Я сделал сборник rem mixins, включая этот, как Gist здесь https://gist.github.com/doughamlin/7103259

Ответ 2

Попробуйте следующее:

padding: #{$padding / 10}rem;

Конкатенация в SASS/SCSS использует синтаксис ruby, и вы смешиваете математическое уравнение, за которым следует конкатенация, которая представляет собой смешанный тип переменных, поэтому мне не кажется, что это не сработало.

Выражения и переменные, включенные в # {здесь}, воспринимаются как отдельные в остальной части строки и, таким образом, не выводят остальные строки. Также пригодится, если ваш результат вызывается, когда вы не ожидали (как и функция unquote())

Ответ 3

Есть ли причина, по которой вы задали ее как список переменных аргументов? Похоже, что это вызывает проблему. Избавьтесь от трех точек, и он ведет себя так, как вы ожидали.