他のscssファイルのクラスを継承する方法

他のscssファイルのクラスを継承する方法について説明します。

ソースコード

@useと@extendを使用します。

// ファイルの配置
styles
- common.scss
- style.scss

styles/common.scss

.box {
    border: 1px solid #aaa;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

styles/style.scss

@use "common"; // idやclassの定義より上に書く必要がある

.error-box {
    @extend .box;
    color: red;
    border-color: red;
}