Question

这是我正在尝试创建的功能：

@function contains-selector ($selector, $subselector) {
  @return str_index($selector,$subselector);
}

但我相信即使您在下面看到的'.weird-selecto'案例也会返回，这是错误的。

示例：

#some .long .weird-selector {
}

//should return true
contains-selector('#some .long .weird-selector', '.weird-selector') 

//should return false
contains-selector('#some .long .weird-selector', '.weird-selecto')

Answer 1

你可以使用这种方法虽然看起来有点复杂

@function contains-selector ($selector, $subselector) {
  $start_index: str-index($selector, $subselector);
  $selector_found: null;
  @if ($start_index == null) {
    $selector_found: false;
  } @else {
    $end_index: $start_index + str-length($subselector) - 1;
    @while( ($end_index <= str-length($selector)) and (str-slice($selector, $end_index, $end_index) != ' ')) {
      $end_index: $end_index + 1;
    }
    $word: str-slice($selector, $start_index, $end_index - 1);
    $selector_found: if($word == $subselector, true, false);
  }
  @return $selector_found;
}

在以下情况下使用此功能

@debug contains-selector('#some .long .weird-selector', '#arbitrary-text'); //false
@debug contains-selector('#some .long .weird-selector', '.wei');            //false
@debug contains-selector('#some .long .weird-selector', '#some');           //true
@debug contains-selector('#some .long .weird-selector', '.weird-selector'); //true
@debug contains-selector('#some .long .weird-selector', '.weird-select');   //false

str-index的工作方式是获取字符串中找到的子字符串的起始索引，如果找不到，则null匹配的子字符串。

str_index('.weird-selector', '.where')返回 null ，因为在where中找不到子标weird-selector而str_index('.weird-selector', '.weird-selec');返回 1 因为可以在字符串.weird-selec

的第一个位置找到子串.weird-selector

在方法的 if 条件下，如果在选择器中找不到子选择器，则str-index将返回null并且该方法返回false @debug contains-selector('#some .long .weird-selector', '#arbitrary-text'); //false

在 else 块中，我们知道选择器中的子选择器类似，但不是它们是一样的。
使用str_index('#some .weird-selector .long', '.weird-selec')，我们可以看到weird-selec位于字符串中，但字符串中的实际字为weird-selector。因此，块中的循环负责获取字符串中字的end_index。找到单词后，会将其与子选择器进行比较，如果匹配则返回true，否则返回false。

希望这会有所帮助：）

如何检查选择器是否在SASS中包含子选择器X？

1 个答案: