Sass mixin compiation errors

Question

So I trying to adopt this chevron code into a sass mixin: http://lugolabs.com/caret.

However Im running into sass compilation errors.

Says that this line: "border-$dira: $secondSize solid $bgColor;" is incorrect...

Could someone tell me whats' wrong with this code?

@mixin chevron($caretWidth, $borderWidth, $direction: 'top', $color, $bgColor) {

  @if $direction == 'top' { 
    $dira: 'bottom';
    $dirb: 'left';
    $dirc: 'right';
    $top1:0px;
    $left1:0px;
    $top2:$borderWidth;
    $left2:$borderWidth;

  } @else if $direction == 'bottom' {
    $dira: 'top';
    $dirb: 'left';
    $dirc: 'right';
    $top1:0px;
    $left1:0px;
    $top2:0px;
    $left2:$borderWidth;
  } @else if $direction == 'left' {
    $dira: 'right';
    $dirb: 'top';
    $dirc: 'bottom';
    $top1:0px;
    $left1:0px;
    $top2:$borderWidth;
    $left2:$borderWidth;
  } @else if $direction == 'right' {
    $dira: 'left';
    $dirb: 'top';
    $dirc: 'bottom';
    $top1:0px;
    $left1:0px;
    $top2:$borderWidth;
    $left2:0px;
  }

  position: relative;

  $secondSize: $caretWidth - $borderWidth;

  &:before {
    content: '';
    position: absolute;
    top: $top1;
    left: $left1;
    border-$dira: $caretWidth solid $color;
    border-$dirb: $caretWidth solid transparent;
    border-$dirc: $caretWidth solid transparent;
  }

  &:after {
    content: '';
    position: absolute;
    top: $top2;
    left: $left2;
    border-$dira: $secondSize solid $bgColor;
    border-$dirb: $secondSize solid transparent;
    border-$dirc: $secondSize solid transparent;
  }
}

To use a string in output, use `border-#{$dira}: $caretWidth ....` — somethinghere, Jan 21 '16 at 15:48

score 1 · Accepted Answer · answered Jan 21 '16 at 15:50

In order to make SASS print the string correctly in an output itself, use the string interpolation method SASS provides: #{$do-what-ever}.

Docs: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

@mixin chevron($caretWidth, $borderWidth, $direction: 'top', $color, $bgColor) {

  @if $direction == 'top' { 
    $dira: 'bottom';
    $dirb: 'left';
    $dirc: 'right';
    $top1:0px;
    $left1:0px;
    $top2:$borderWidth;
    $left2:$borderWidth;

  } @else if $direction == 'bottom' {
    $dira: 'top';
    $dirb: 'left';
    $dirc: 'right';
    $top1:0px;
    $left1:0px;
    $top2:0px;
    $left2:$borderWidth;
  } @else if $direction == 'left' {
    $dira: 'right';
    $dirb: 'top';
    $dirc: 'bottom';
    $top1:0px;
    $left1:0px;
    $top2:$borderWidth;
    $left2:$borderWidth;
  } @else if $direction == 'right' {
    $dira: 'left';
    $dirb: 'top';
    $dirc: 'bottom';
    $top1:0px;
    $left1:0px;
    $top2:$borderWidth;
    $left2:0px;
  }

  position: relative;

  $secondSize: $caretWidth - $borderWidth;

  &:before {
    content: '';
    position: absolute;
    top: $top1;
    left: $left1;
    border-#{$dira}: $caretWidth solid $color;
    border-#{$dirb}: $caretWidth solid transparent;
    border-#{$dirc}: $caretWidth solid transparent;
  }

  &:after {
    content: '';
    position: absolute;
    top: $top2;
    left: $left2;
    border-#{$dira}: $secondSize solid $bgColor;
    border-#{$dirb}: $secondSize solid transparent;
    border-#{$dirc}: $secondSize solid transparent;
  }
}

Sass mixin compiation errors

1 Answers1