Question

我正在撰写Shopify主题，并希望将BEM和SCSS用于Shopify主题中的所有样式。出于某种原因，我的块中的元素不会随着我的样式规则而改变。

这是我的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>

它将包含一个带有文本的图像。很简单！这是SCSS

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

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

父块内的样式规则按预期运行，但&[class*='__text']块内的所有内容都没有做任何事情。为什么没有渲染？

谢谢！

Answer 1

没有featured-hero类的元素也有一个包含字符串__text的类。

选择器应为

&__text

Shopify中的SCSS和BEM

1 个答案: