如何檢查選擇器是否包含SASS中的子選擇器X？

這裏是我試圖創建函數：如何檢查選擇器是否包含SASS中的子選擇器X？

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

，但我相信它甚至會爲'.weird-selecto'情況下，你看到下面的，這是錯誤的返回true。

例如：

#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')

來源

2016-10-25 Sprout Coder

你可以在以下情況下

@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作品中雖然看起來有點複雜

@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; 
}

使用功能使用此方法它得到起始索引的一個子串在一個字符串內發現或null如果找不到匹配的子串。

str_index('.weird-selector', '.where')回報空因爲子where不能weird-selector而str_index('.weird-selector', '.weird-selec');回報發現，因爲子.weird-selec可以在字符串的第一個位置找到.weird-selector

在如果如果在選擇器中未找到子搜索器，則str-index返回空，並且返回方法NS假
@debug contains-selector('#some .long .weird-selector', '#arbitrary-text'); //false

在其他塊，我們知道subselector在選擇發現是類似的，但不如果他們是相同的。
使用str_index('#some .weird-selector .long', '.weird-selec')，我們可以看到weird-selec是在字符串中，但實際字中的字符串是weird-selector。因此，塊中的循環負責獲取字符串中的字的end_index。找到單詞後，將其與子搜索器進行比較，如果匹配，則該方法返回true，否則返回false。

希望這會有所幫助:)

來源

2016-10-26 10:18:13

如何檢查選擇器是否包含SASS中的子選擇器X？

回答

相關問題