Sass 与 if else 混合 [英] Sass mixin with if else

问题描述

我有以下混合

@mixin arrows($arrowdirection:"left", $arrowsize:"5px", $arrowcolor:$navbgblue ) {
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    @if $arrowdirection == "right" {
        border-top: $arrowsize + px;
        border-bottom: $arrowsize + px;
        border-left: $arrowsize + px $arrowcolor;
    } @else if $arrowdirection == "left" {
        border-top: $arrowsize + px;
        border-bottom: $arrowsize + px;
        border-right:$arrowsize + px $arrowcolor;
    } @else if $arrowdirection == "up" {
        border-bottom: $arrowsize + px $arrowcolor;
        border-left: $arrowsize + px;
        border-right: $arrowsize + px;
    } @else if $arrowdirection == "down" {
        border-left: $arrowsize + px;
        border-right: $arrowsize + px;
        border-top: $arrowsize + px $arrowcolor;
    }
}

出于某些(无疑是显而易见的)原因而拒绝工作如果我使用默认值或传入某些内容

which for some (no doubt obvious) reason refuses to work if i use either the default or pass something in

.test{
    @include arrows("left", "5px", "blue");
}

我只得到 CSS

width: 0;
height: 0;
border-color: transparent;
border-style: solid;

所以我的 if/else 不知何故没有启动.为什么?

so my if / else is somehow not kicking in. why please ?

推荐答案

是的，优化后肯定存在某种错误.但这有效

yeah there is definately a bug of some sort, with the optimization. But this works

@mixin leftarrow($size:5px, $direction:left) {
  border-width: $size;
  border-color: transparent;
  border-style: solid;
  display: inline-block;
  height: 0px;
  width: 0px;

  @if $direction == "right" {
   border-left-color: $navbgblue;
   border-right-width: 0px;
 } @else if $direction == "left" {
   border-right-color: $navbgblue;
   border-left-width: 0px;
 } @else if $direction == "up" {
   border-bottom-color: $navbgblue;
   border-top-width: 0px;
 } @else if $direction == "down" {
   border-top-color: $navbgblue;
   border-bottom-width: 0px;
 }
}

.test{
  @include leftarrow(5px, up);
}

所以我会用它:-)

这篇关于Sass 与 if else 混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！