scss mixin for custom css properties

Question

@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;
       }
     }
  }
}

This is a scss mixin for giving styles to css properties with sides like margin, padding, border etc.

I am calling my mixin as below

@include genericSidesStyles('top', 20px, 'margin');

here top is for margin-top, 20px is the distance and margin is the cssProperty but I am getting the following error

expected ':' after $cssProperty- in assignment statement

Help me to know where I am wrong in this

I tested your mixin, it seems its not passing the @if ($side == 'top' or $side == 'bottom' or $side == 'left' or $side == 'right' ) condition. Remove the @each loop (not sure why is it even required) & it should work fine. Also change your statement to #{$cssProperty}-#{$side}: $style — Nikhil Nanjappa
@NikhilNanjappa I believe the loop is to allow for multiple $sides so properties for margin-top and margin-bottom can be created simultaneously by passing both values as a list for $sides. — ESR
It should start working now that you have edited your answer by removing $cssProperty from @each statement - All you need to do is change the statement $cssProperty-#{$side}: $style; to #{$cssProperty}-#{$side}: $style; — Nikhil Nanjappa

ESR ESR · Accepted Answer · 2016-11-30T12:10:24

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;
       }
     }
  }
}

scss mixin for custom css properties

1 Answers