@layer

@layerを使用した詳細度の設計

@layer a {
    div#sample span {
        color: red;
    }
}
@layer b {
    div span {
        color: green;
    }
}
@layer c {
    span {
        color: blue;
    }
}

このように記載した場合、@layerによってグルーピングされたレイヤー単位での記述順でスタイルが適用されるため、@layer cで記述されたスタイルが適用される

@layer c,a,b;
@layer a {
    div#sample span {
        color: red;
    }
}
@layer b {
    div span {
        color: green;
    }
}
@layer c {
    span {
        color: blue;
    }
}

また、@layer c,a,bと優先順を指定することもでき、この場合@layer bが最優先となる

それらを応用し、scssファイルでスタイルを分割定義し、インポート再利用することも可能

@layer base {
  body {
    font-family: sans-serif;
  }
}

@layer components {
  .button {
    padding: 8px 16px;
    border: 1px solid black;
    background-color: white;
    color: black;
    &:hover {
      background-color: black;
      color: white;
    }
  }
}

@layer utilities {
  .hidden {
    display: none;
  }
}

@use 'styles' as styles;

.main-content {
  font-size: 16px;
  @extend styles.base; /* extends the base layer */
  .my-button {
    @extend styles.components.button; /* extends the components layer */
  }
  .is-hidden {
    @extend styles.utilities.hidden; /* extends the utilities layer */
  }
}