Sass mixin compiation errors

Question

所以我试图采用这个雪佛龙码进入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; 
    } 
} 

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