sass - 如果字符串包含或以以下结尾，SASS 有没有办法处理？

Question

我需要像这样在 sass 中使用 if 语句:

@each $name, $char in $font-icons {
    @if ($name ends with "-outline") {
        //do something
    }
}

有办法做到这一点吗？

Answer 1

不完全是您想要的，但我认为它与您使用 Sass 所能得到的最接近。

使用str-index($string, $substring)你可以找出$name是否包含-outline:

@each $name, $char in $font-icons {
    @if (str-index($name, '-outline')) {
        //do something
    }
}

编辑:刚刚编写了一个快速 Sass 函数来实际找出字符串是否以另一个字符串结尾:

@function ends-with($string, $find) {
  @if (str-index($string, $find) == (str-length($string) - str-length($find) + 1)) {
    @return true;
  } @else {
    @return false;
  }
}

@each $name, $char in $font-icons {
    @if (ends-with($name, '-outline')) {
        //do something
    }
}

更新 #2:如果 $string 多次包含 $find，上面的函数将返回 false。如果 $string 真正以 $find 结尾，此函数将返回 true:

@function ends-with($string, $find) {
  @if (str-slice($string, (str-length($string) - str-length($find) + 1)) == $find) {
    @return true;
  } @else {
    @return false;
  }
}

更新#3:简化:

@function ends-with($string, $find) {
  @return str-length($string) >= str-length($find) && str-slice($string, (str-length($string) - str-length($find) + 1)) == $find;
}