SASS offset position mixin troubles - css

Question

I've been trying to make an offset positioning mixin for the past couple of hours. I've been struggling with lots of errors, I cant understand what is wrong.
Here is the latest version,
#function is-offset-prop-valid($value) {
$values: auto initial inherit 0;
#return (type-of($value) == number and not unitless($value))
and (index($values, $value) != false);
}
#mixin position($position, $args) {
$offsets: top right bottom left;
#each $offset in $offsets {
$i: index($args, $offset);
#if $i == length($args) {
#error "Empty offset values not allowed";
} else {
#if is-offset-prop-valid(nth($args, $i+1)) {
#{$offset}: nth($args, $i+1);
} else {
#error "Set value #{nth($args, $i+1)} not a valid property for #{$offset}";
}
}
}
positon: $position;
}
Normally I would have the nth($args, $i + 1) set as variable, but for the sake of this example, I left it like that.
When I use the mixin
.abs {
#include position(absolute, top 10px);
}
I get this error from the inner if statement:
Set value 10px not a valid property for top

Answer 1

I fixed your code and rewrited it a bit. Sassmeister demo.
At first, is-offset-prop-valid function is now more readable.
Secondly, mixin position does loop through arguments ($args), not through $offsets. And I added more argument checks (look at comments). And you need to write # symbol before else: #else.
#function is-offset-prop-valid($value) {
$values: auto initial inherit 0;
$is-numder: type-of($value) == number;
$is-unitless: unitless($value);
$match-default-values: index($values, $value) != null;
#return ($is-numder and not $is-unitless) or $match-default-values;
}
#mixin position($position, $args...) {
$offsets: top right bottom left;
#if length($args) == 0 {
#error "Empty offset values not allowed.";
}
#each $arg in $args {
// Check offset key-value pair
#if length($arg) != 2 {
#error "Invalid pair offset-name: offset-value.";
}
$offset: nth($arg, 1);
$value: nth($arg, 2);
// Check offset name parameter
#if index($offsets, $offset) == null {
#error "Invalid offset name: `#{$offset}`.";
}
// Check offset value parameter
#if not is-offset-prop-valid($value) {
#error "Set value `#{$value}` not a valid property for `#{$offset}`.";
}
#{$offset}: $value;
}
position: $position;
}
.abs {
#include position(absolute, top 10px, left 23px);
}
But it seems to me that a simple set position is much simpler and more understandable:
.abs {
top: 10px;
left: 23px;
position: absolute;
}