スタイルの構成に使用できる、@ (アットマーク) で始まる一連のルールがあります。これらのルールを使用して、次のことができます: 
●    クラスを構成する  
たとえば、H1 クラスが H1_Negative クラスと Margin-Sides クラスのスタイル、そして H1 クラスに定義する特定のプロパティ (ここでは色のみ) から構成されると宣言できます:

.H1
      {
          @include H1_Negative Margin-Sides;
          color: $colors.Black;
      }

「スタイルの include ルール」を参照してください。
●    ほかの Design System オブジェクトからトークンまたはスタイル (あるいはその両方) をインポートする
たとえば、TravelAgency という DSO からトークンとスタイルの両方を現在の DSO にインポートすることを宣言できます:

styles TravelAgencyFrontendExtended
{
    @import TravelAgency;
}

「スタイルの import ルール」を参照してください。
●    クラスのスタイルを画面サイズに合わせて変える 
たとえば、画面幅が 768px に満たないとき、H1_Negative クラスはフォントサイズが 26px になります: 

@media screen and (max-width:767px)
{
    .H1_Negative {
        font-size: 26px;
    }
}

これは CSS メディアクエリに対応しています。
「スタイルの media ルール」を参照してください。
●    既定以外のソースを組み込む
たとえば、一部のトークンやクラスで既定フォントではない AbhayaLibre-bold ファミリを使用できます。

@font-face
{
    font-family: AbhayaLibre-Bold; 
    src: gx-file(AbhayaLibre-Bold_ttf);
}
.H1_Negative
{
    color: #FFFFFF;
    font-size: $fontSizes.H1;
    font-family: AbhayaLibre-Bold;
}

「スタイルの font-face ルール」を参照してください。

使用可能バージョン

GeneXus 17 Upgrade 6 以降。