Question

我需要像sa这样的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-slice($string, (str-length($string) - str-length($find) + 1)) == $find;
}

Answer 2

尝试包含：

@each $animal in puma, sea-slug, egret, salamander {
  @if (str-index($animal, -slug)) {
    .#{$animal}-icon {
      background-image: url('/images/#{$animal}.png');
    }
  }
}

这是以结尾：

@each $animal in puma, sea-slug, sea-slugs, egret, salamander {
  @if (str-index($animal, -slug) and (str-index($animal, -slug) + 4) == str-length($animal) ) {
    .#{$animal}-icon {
      background-image: url('/images/#{$animal}.png');
    }
  }
}

或

@each $animal in puma, seaf-slugs, sea-slug, egret, salamander {
  $ind: str-index($animal, -slug);
  @if ($ind and ($ind + 4) == str-length($animal) ) {
    .#{$animal}-icon {
      background-image: url('/images/#{$animal}.png');
    }
  }
}

请注意， sea-slugs 与我们的@if不符，硬编码“4”是我们搜索条件的长度（ -slug ） - 1.

你可以在http://www.sassmeister.com/

测试你的sass

Answer 3

因为我只是在搜索此内容，所以将添加此选项：index。 index($list, $value)返回一个int（从1开始的索引）或null，这意味着它可以在布尔上下文中使用。

这是一个很好的用例：

@mixin flexbox($args:'') {
    @if index($args, 'inline') {
        display: inline-flex;
    } @else {
        display: flex;
    }

    @if index($args, 'bar') == null {
        /* style if 'bar' ISN'T passed */
    }
}

.foo {
    @include flexbox(inline);
}

您可以使用一串由空格链接的关键字而不是映射来创建令人愉悦的混合器和for循环。（考虑浏览器如何处理background: red url(image.png) no-repeat center;）

Answer 4

使用此SCSS代码：

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

Answer 5

这是做到这一点的一种方式

    @if (str-index($name, "-outline")!=null) {
      #{$name}{
        background-color:$char;
      }
        //do something
    }
}

str-index($name, "-outline")返回$ string（{-outline）中$ substring（$name）的第一个索引，如果null不包含{ {1}}。

如果字符串包含或结尾，SASS中是否有办法？

5 个答案: