Question

我正在尝试为scss键和值创建if语句。

例如：

$directionLang: rtl;

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

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

问题出在.arrow-icon内部。

我得到一个错误：

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

有什么建议吗？

谢谢！

Answer 1

在这种情况下，您应该使用SASS / SCSS @mixin而不是@function。

@function来提供/计算值，例如

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

@mixin功能更强大，但也适合您要使用完全不同的CSS规则的情况。

示例代码片段

HTML

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

SCSS

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

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

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

Live example

Answer 2

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

在您的情况下，您必须使用mixin并将它们包括在您的班级中： https://sass-lang.com/documentation/at-rules/mixin

在SCSS中使用函数和if语句

2 个答案: