Sass 在SCSS中使用函数和if语句

我试图为scss键和值创建一个if语句

例如：

$directionLang: rtl;

@function rightOrLeft($directionLang) {
@if $directionLang == rtl {
  @return 'left: 10px';
}
@else {
  @return 'margin-left: 230px';
  }
}

.arrow-icon {
#{rightOrLeft($directionLang)};
}

问题出在.arrow图标内

我得到一个错误：

错误：属性“#{rightOrLeft（$directionLang）}”后面必须跟一个 “：”

有什么建议吗

---

谢谢

函数用于获取值，您必须将其作为属性的值调用

在您的情况下，您必须使用mixin并将其包含在您的类中：

---

在这种情况下，您应该使用SASS/SCSS

@mixin

而不是

@function

• 应使用SASS/SCSS中的

  @函数

  提供/计算值，例如

  .arrow-icon {
    margin-left: functionName(args);
  }
  

• @mixin

  功能更强大，但当您想要获得完全不同的css规则时，它也适合您的情况
  代码片段示例：
  HTML

  <span class="arrow-icon">&larr;</span>
  

---

据我所知，您以错误的方式使用函数，因为它必须在表达式的右侧使用。使用此语法，您应该编写并使用mixin:

@include right或left（directionLang）

。有关函数的更多信息，请参见Sass文档：

$directionLang: rtl;
//$directionLang: ltr;       //uncomment for test

@mixin rightOrLeft($directionLang) {
   @if $directionLang == "rtl" {
      left: 10px;
   }  
   @else {
      margin-left: 230px;
   }
}

.arrow-icon {
   @include rightOrLeft($directionLang);
}