@mixin genericSidesStyles ($sides, $style, $cssProperty) {
@if($sides == '') {
$cssProperty: $style;
}
@else {
@each $side in $sides {
@if ($side == 'top' or $side == 'bottom' or $side == 'left' or $side == 'right' ) {
$cssProperty-#{$side}: $style;
}
}
}
}
@include genericSidesStyles('top', 20px, 'margin');
expected ':' after $cssProperty- in assignment statement
You need to interpolate the $cssProperty
variable (so it becomes #{$cssProperty}
, just like you have done with the $side
variable. So your final code should be:
@mixin genericSidesStyles ($sides, $style, $cssProperty) {
@if($sides == '') {
#{$cssProperty}: $style;
}
@else {
@each $cssProperty, $side in $sides {
@if ($side == 'top' or $side == 'bottom' or $side == 'left' or $side == 'right' ) {
#{$cssProperty}-#{$side}: $style;
}
}
}
}