CSSでは16進数のRGB値に透明度を指定することはできません。例えば以下のような指定はエラーになり、背景色が適用されません。

.products .contents {
  margin-top: 20px;
  background: rgba(#ff0000, 0.3);
}

Sassではrgba();という組み込み関数が定義されているため、16進数のRGB値をRGBA形式に変換してくれます。そのため以下のように指定することができます。

$red = #ff0000;

.products {
  .contents {
    margin-top: 20px;
    background: rgba($red, 0.3);
  }
}

コンパイル後のCSSは以下のようになります。16進数のRGB値がRGBA形式に変換されているのが確認できます。

.products .contents {
  margin-top: 20px;
  background: rgba(255, 0, 0, 0.3);
}