現在のループに入力の一部が含まれているかどうかを確認します

Question

$ratings-listという配列があります。$current-classに.5が含まれている場合は、別のセグメントを使用します。

$ratings-list: 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5; 

    @each $current-class in $ratings-list { 
    $i: index($ratings-list, $current-class); 
    &[data-rating="#{$current-class}"] { 
     @if (index($current-class, .5)) { 
     .rating-stars__star:nth-child(-n+#{floor($current-class)}) .ratings-star { 
      height: floor($current-class); 
     } 
     } @else { 
     .rating-stars__star:nth-child(-n+#{$i}) .ratings-star { 
      height: 7px; 
     } 
     } 
    } 
    } 

上記常にelseheight: 7pxセグメントを返します。

Answer 1

$ current-classを文字列に変換し、代わりにstr-indexを使用できます。

$ratings-list: 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5; 

    @each $current-class in $ratings-list { 
    $i: index($ratings-list, $current-class); 
    [data-rating="#{$current-class}"] { 
     @if (str-index(#{"" + $current-class}, '.5')) { 
     .rating-stars__star:nth-child(-n+#{floor($current-class)}) .ratings-star { 
      height: floor($current-class); 
     } 
     } @else { 
     .rating-stars__star:nth-child(-n+#{$i}) .ratings-star { 
      height: 7px; 
     } 
     } 
    } 
    } 

[data-rating="1"] .rating-stars__star:nth-child(-n+1) .ratings-star { 
    height: 7px; 
} 

[data-rating="1.5"] .rating-stars__star:nth-child(-n+1) .ratings-star { 
    height: 1; 
} 

[data-rating="2"] .rating-stars__star:nth-child(-n+3) .ratings-star { 
    height: 7px; 
} 

[data-rating="2.5"] .rating-stars__star:nth-child(-n+2) .ratings-star { 
    height: 2; 
} 

[data-rating="3"] .rating-stars__star:nth-child(-n+5) .ratings-star { 
    height: 7px; 
} 

[data-rating="3.5"] .rating-stars__star:nth-child(-n+3) .ratings-star { 
    height: 3; 
} 

[data-rating="4"] .rating-stars__star:nth-child(-n+7) .ratings-star { 
    height: 7px; 
} 

[data-rating="4.5"] .rating-stars__star:nth-child(-n+4) .ratings-star { 
    height: 4; 
} 

[data-rating="5"] .rating-stars__star:nth-child(-n+9) .ratings-star { 
    height: 7px; 
} 

にコンパイル