Ошибки расчета смешивания сасси

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

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