时间戳

首页 > 解决方案 > 在 SCSS 中使用函数和 if 语句

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-icon 内部。

我收到一个错误：

错误：属性“#{rightOrLeft($directionLang)}”必须后跟一个“:”。

有什么建议么？

谢谢！！

标签： sass

解决方案

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

  • @function在 SASS/SCSS 中应该用于提供/计算值，例如

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

    活生生的例子

推荐阅读