CSSカスタムプロパティはCSS変数とも呼ばれ、CSS内に変数を定義して各プロパティの値で呼び出して使用します。一般的に変数は:rootに定義してグローバル変数のように使用します。

なお、CSSファイル内に記述したCSS変数の定義部分は、htmlファイルのstyleタグ内に記述して上書きできます。

//layout.css
:root {
  --font: 'Noto Sans JP', sans-serif;
  --font-en: 'Josefin Sans', sans-serif;
  --primary-bg: #1a1a1a;
  --primary-txt: #ffffff;
}

CSSプロパティの値として使用したい箇所で、CSS変数を呼び出します。

//layout.css
.module-01 {
  margin: 120px auto 0;
  background-color: var(--primary-bg);
}
.module-01__txt {
  font-family: var(--font-en);
  font-weight: 600;
  color: var(--primary-txt);
}

なお呼び出した変数が宣言されていなかったり無効になっていたりした時のために、フォールバック値を記述しておくと代わりの値が適用されます。

//layout.css
.module-01 {
  margin: 120px auto 0;
  background-color: var(--primary-bg, #1a1a1a);
}
.module-01__txt {
  font-family: var(--font-en, 'Josefin Sans', sans-serif);
  font-weight: 600;
  color: var(--primary-txt, #ffffff);
}

次に、SassでCSSカスタムプロパティを使用する際の例です。変数を:rootに定義してグローバル変数のように使用するのは、CSSファイルへの記述もSassファイルへの記述も同じです。

//_variable.scss
:root {
  --font: 'Noto Sans JP', sans-serif;
  --font-en: 'Josefin Sans', sans-serif;
  --primary-bg: #1a1a1a;
  --primary-txt: #ffffff;
}

このCSS変数の値をSassの変数で定義します。この時、フォールバック値を記述しておくこともできます。

//_variable.scss
$font: var(--font);
$font-en: var(--font-en);
$primary-bg: var(--primary-bg);
$primary-txt: var(--primary-txt);

CSSプロパティの値として使用したい箇所で、Sassの変数を呼び出します。

//_module-01.scss
.module-01 {
  margin: 120px auto 0;
  background-color: $primary-bg;
}
.module-01__txt {
  font-family: $font-en;
  font-weight: 600;
  color: $primary-txt;
}

ただしこの場合、Sassの組み込み関数が動作しないといった制約があります。

//_module-01.scss
.module-01 {
  margin: 120px auto 0;
  background-color: rgba($primary-bg, .8); //動作しない
}
.module-01__txt {
  font-family: $font-en;
  font-weight: 600;
  color: $primary-txt;
}