Мне нравится использовать 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 распознает переменные как числа и поэтому правильно использует оператор деления на них?
Кроме того, после тестирования этого больше, я понял, что конкатенация происходит только в последней переменной.