【Sass】エラー「Internal Error: Incompatible units: ‘px’ and ‘vw’」の対処法

「Internal Error: Incompatible units: ‘px’ and ‘vw’」というエラーは、ピクセル（px）とビューポート幅（vw）の間で発生します。この記事では、このエラーの原因と解決方法について詳しく説明します。

エラーの原因

このエラーは、pxとvwのような異なる単位を直接変換しようとした際に発生します。例えば、以下のようなコードはエラーを引き起こします。

.element {
  width: 100px + 10vw;
}

この場合、Sassはpxとvwを直接加算する方法がないためエラーが発生します。

単位の変換を避ける

異なる単位を直接変換しようとする代わりに、別々に扱うようにしましょう。以下のように、calc()関数を使用して異なる単位を組み合わせることができます。

.element {
  width: calc(100px + 10vw);
}

これにより、異なる単位を正しく組み合わせることができます。

単位を統一する

可能な限り、使用する単位を統一することも一つの方法です。例えば、全ての値をvwに変換することができます。

.element {
  width: 10vw + (100px / 16 * 1vw); // 16pxが1vwに相当すると仮定
}

このアプローチは、デザインの意図や具体的なコンテキストに依存するため、慎重に行う必要があります。

変数を使用する

異なる単位を変数に格納してから組み合わせる方法も有効です。以下のように、変数を使用して異なる単位を管理します。

$base-width: 100px;
$additional-width: 10vw;

.element {
  width: calc(#{$base-width} + #{$additional-width});
}

まとめ

Sassのコンパイルエラー「Incompatible units: ‘px’ and ‘vw’」は、異なる単位を直接組み合わせようとすることで発生します。このエラーを解決するためには、calc()関数を使用する、単位を統一する、変数を活用するなどの方法があります。これにより、異なる単位を適切に扱い、エラーを回避することができます。