Question

我正在尝试在Sass中强制执行某种语义 css类嵌套。我想强制部分的css代码只能在部分中使用，以确保在语义上应该使用<section />标记。

但是我在Sass文件中使用&时遇到了麻烦。请考虑以下html：

<section class="section-home">
  <h1 class="section-home__heading">Section heading</h1>
  <p class="section-home__intro">This is some random text</p>
</section>

我认为我可以在Sass中使用以下代码，但不能：

section {
  &.section-home {
    background-color: white;
    &__heading {
      font-size: 5rem;
    }
    &__intro {
      color: grey;
    } 
  }  
}

Sass将其呈现为以下CSS：

section.section-home{background-color:#fff}
section.section-home__heading{font-size:5rem}
section.section-home__intro{color:grey}

这不是我期望或需要的，我想：

section.section-home{background-color:#fff} 
section.section-home .section-home__heading{font-size:5rem} 
section.section-home .section-home__intro{color:grey}

这是一个错误吗？我在这里做错了吗？

Answer 1

只需将CSS更改为：

section {
  &.section-home {
    background-color: white;

    .section-home {
      &__heading {
        font-size: 5rem;
      }
      &__intro {
        color: grey;
      } 
    }  
  }
}

这样Sass会将其解释为：

section.section-home

section.section-home .section-home__heading

section.section-home .section-home__intro

Answer 2

这将解决您的问题，但为什么要将其称为＆＃34; .section - ＆＃34;什么时候你可以简单地称它为＆＃34; .home＆＃34;当它已经被html标签限制时。

section {
  &.section-home {
    background-color: white;

    .section-home__heading {
      font-size: 5rem;
    }

    .section-home__intro {
      color: grey;
    }
  }
}

Sass＆＃34;语义上＆＃34;嵌套标签和类

2 个答案: