Shopify의 SCSS 및 BEM

Question

Shopify 테마를 작성 중이며 Shopify 테마의 모든 스타일에 BEM 및 SCSS를 사용하려고합니다. 어떤 이유로 내 블록 안의 요소가 내 스타일 규칙과 함께 변경되지 않습니다.

여기가 그 위에 텍스트와 이미지를 포함 내 HTML

<div class="featured-hero"> 
    <a href="/go/to-here"> 
     <div class="featured-hero__hero-img"></div> 
     <div class="featured-hero__text"> 
      Awesome text here 
     </div> 
    </a> 
</div> 

입니다. 충분히 간단! 여기에 예상하지만, 모든 것이 &[class*='__text'] 블록 내부에 아무것도하지 않는 한 부모 블록 내부의 스타일 규칙이 작동하는 SCSS

.featured-hero { 
    width: 100%; 
    border: 2px solid black; 
    height: 200px; 
    background-color: firebrick; 

    &[class*='__text'] { 
     font-size: 100px; 
    } 
} 

입니다. 왜 이것이 렌더링되지 않습니까?

감사합니다.

Answer 1

문자열이 __text 인 클래스가있는 featured-hero 클래스를 가진 요소가 없습니다.

선택기가

&__text