Sass mixin 编译错误 [重复]答案

【问题标题】：Sass mixin compiation errors [duplicate]Sass mixin 编译错误 [重复]
【发布时间】：2016-04-27 22:54:37
【问题描述】：

所以我尝试将这个 chevron 代码应用到一个 sass mixin 中： http://lugolabs.com/caret.

但是我遇到了 sass 编译错误。

表示这一行：“border-$dira: $secondSize solid $bgColor;” 不正确...

谁能告诉我这段代码有什么问题？

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

【问题讨论】：

要在输出中使用字符串，请使用border-#{$dira}: $caretWidth ....
啊，谢谢！这样做了。

标签： css sass

【解决方案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;
  }
}

【讨论】：