css - Sass 混合编译错误

Question

<分区>

Answer 1

为了使 SASS 在输出本身中正确打印字符串，请使用 SASS 提供的字符串插值方法:#{$do-what-ever}。

文档: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;
  }
}