Sassでbootstrapをカスタマイズしたいのに泣

前提・実現したいこと

Sassを使ってbootstrap4をカスタマイズしたい。

発生している問題・エラーメッセージ

ec2-user:~/environment/portfolio/css (master) $ sass --compass --watch portfolio.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: portfolio.scss
      error ../scss/_root.scss (Line 4: Invalid CSS after "...lor}: #{$value}": expected "{", was ";")

boostrapのscssソースコードをportfolio.scssにimportした。
そしてimportした内容をstyle.cssにコンパイルしようとしたら、上のエラーが出てしまった。

該当のソースコード

Sass

試したこと

エラー文を読んでscssフォルダの_root.scssに問題があると思いました。
しかし、これはbootstrapのソースコードなので、間違ってるはずはないと思い確認したらなにもおかしいところはありませんでした。
自分が考えたことは、まず、ソースコードがportfolio.scssにしっかりimport出来てないのかと思いました。pathを確認しましたが間違えはなさそうでした。
後はターミナルのコマンドが正しくないからと思いましたが、自分では確認できるスキルがありませんでした。

ちなみにコンパイルされたstyle.cssを確認すると
Error: Invalid CSS after "...lor}: #{$value}": expected "{", was ";"
on line 4 of ../scss/_root.scss
from line 11 of ../scss/bootstrap.scss
from line 3 of portfolio.scss

1: :root {
2: // Custom variable values only support SassScript inside #{}.
3: @each $color, $value in $colors {
4: --#{$color}: #{$value};
5: }
6:
7: @each $color, $value in $theme-colors {
8: --#{$color}: #{$value};
9: }
こんな感じになってました。