Discussion on: Goodbye SASS 👋, welcome back native CSS

View post

Replies for: I admit I'm on point with everything showed here expect for the @container queries. Each time I see an exemple of those I get really confused and m...

Karsten Biedermann • Mar 26 '24 • Edited

Typically, you specify the container-type in advance in the parent element. For example, if you set @container (width >= 800), it will always check the parent to see how much width is available.

Example:

<div class="parent-container">
  <div class="headline">Test</div>
</div>

.parent-container {
  container-type: inline-size;

  .headline {
    font-size: 2rem;
  }

  @container (width >= 720px) {
    .headline {
      font-size: 2.5rem;
    }
  }
}