scssで変数を設定した正の値を負の値に変換して参照する方法です。

例えば、50px という値を変数で設定した場合に、-50px としてプロパティに使用したいが、別途変数を用意するのは管理上避けたい、そんな場合が想定されます。

calcを使用する方法

.fuga {
  top: calc( #{$hoge} * -1);
}

ポイント

• calcの中で変数を使用する場合、変数を#{}で囲う
• 掛け算の * の前後はスペースが必要

calcを使用しない方法

.fuga {
  top: -( $hoge )
}

ポイント

• 変数を -()で囲う

まとめ

calcを使用する方法、使用しない方法、どちらでも対応可能です。