基本的には次の 3 とおりの記述スタイルがあります:

CSS

形式は CSS スタイルシートと完全に互換性があります。
最適な方法ではありませんが、CSS を直接貼り付け、Web アプリケーションのデザインシステムのスタイルシートとして使用することができます。

Styles My_Style
{
  .HeaderContainer
  {
       background-color: #fafafb;
       border-radius: 0px;
       border-width: 1px;
       font-size: 16px;
  }
}

純正

デザインシステムでは、すべての値をトークンにすべきという議論があります。この記述スタイルでは、プロパティ値をトークンで完全にパラメーター化します。

Styles My_Style
{ 
   .HeaderContainer 
   { 
      background-color: $color.background; 
      border-radius: $radius.circle; 
      border-width: $border.thin; 
      font-size: $fontSizes.small; 
   }    
}

この場合、対応するトークンを事前に定義する必要があります。

ハイブリッド

このスタイル定義方法では、ハイブリッドシートを作成し、上記の両方の方法を利用します。一部のプロパティはトークンでパラメーター化し、その他は固定値を指定します。

Styles My_Style
{
   .HeaderContainer
   {
      background-color: #fafafb;
      border-radius: $radius.circle;
      border-width: 1px;
      font-size: $fontSizes.small;
   }
}

参考情報

デザインシステムのスタイル