スタイルの Include ルール

クラスセレクターまたは CSS セレクターから別の定義済みクラスをインクルードします。

構文

@include <class_name₁> [  <class_name_N> ... ] ;

「デザインシステムのクラスの記述スタイル」を参照してください。
入力値の説明:
class_name₁, ..., class_name_N
同一のスタイルセクションで宣言されているクラスの名前です。この名前のクラスがなかった場合は無視されます。

● このルールは @media ルール内では使用できません。
● このルールでは、別の DSO または CSS で定義され、@import ルールでインポートされているクラスはサポートされません。
クラスで Include ルールが宣言されている場合、含めるクラスのプロパティの宣言は、そのクラス内に記述された場合と同じ順で取り込まれます。つまり、元のクラスのプロパティ宣言に追加されます。重複がある場合、親クラスのものはインクルードされません。子クラス (宣言しているクラス) のものだけがインクルードされます。

例

H1 クラスでは、H1_Negative の宣言ブロック全体が有効です。ただし、色の宣言は例外で、H1 で明示的に指定されている宣言が有効になります。

.H1_Negative
{
     font-family: $fonts.Title1;
     font-size: $fontSizes.H1;
     font-weight: bold;
     letter-spacing: -1.72px;
     color: #FFFFFF;
}
.H1
{
     @include H1_Negative;
     color: $colors.Black;
}

Web アプリケーションに使用した場合、生成される CSS は次のようになります (トークンが値に置き換わっていることに注目してください):

.H1_Negative
{
    font-family: AbhayaLibre-Bold;
    font-size: 95px;
    font-weight: bold;
    letter-spacing: -1.72px;
    color: #FFFFFF;
} 
.H1
{
    font-family: AbhayaLibre-Bold;
    font-size: 95px;
    font-weight: bold;
    letter-spacing: -1.72px;
    color: #181918;
}

複数のクラスをインクルードしてクラスを定義することもできます:

.MenuMainItem
    {
        @include Margin-Sides MenuItem;
        color: #FFFFFF;
    }

Include ルール 1 つだけを指定し、プロパティの設定がなくても構いません:

.MenuMainItem
    {
        @include Margin-Sides MenuItem;
    }

F12 - クラスに移動

Include ルールで参照されているクラスがある場合、そのクラス定義に簡単に移動できます。これには、2 つの方法があります:

クラスを選択し、キーボードショートカット F12 を押します。
クラスを右クリックし、コンテキストメニューの [ クラスに移動 ] オプションを選択します。

どちらの場合も、DSO の同じスタイル内にあるか、別の DSO にあるかに関係なく、クラス定義に移動します。

クラスが同じ DSO にない場合、継承がチェックされます。次に、親 DSO (またはインポートツリー内の任意のもの、親の親である場合があります) が開かれ、対応するクラスの定義が強調表示されます。

参考情報

一般的なトピックについては「デザインシステムのスタイルのルール」を参照してください。

構文

制限

例

F12 - クラスに移動

参考情報