設定内の可変幅を持つテーマ

こんにちは!

テーマに設定を追加したいのですが、いくつか質問があります。

背景画像として画像をアップロードする設定や、背景に関連するその他の設定があるため、welcome-banner コンポーネントを調べました。

banner_background_image:
  type: upload
  default: ""

banner_background_repeat:
  type: enum
  default: no-repeat
  choices:
    - no-repeat
    - repeat
    - repeat-x
    - repeat-y

banner_background_size:
  type: string
  default: cover
  description: uses ..... CSS background size property</a>

CSS ファイルには次のように記載されています。

.welcome-link-banner-wrapper {
    background-color: #{$banner-background-color};
    background-image: url(#{$banner-background-image});
    background-size: #{$banner-background-size};
    background-repeat: #{$banner-background-repeat};
    background-position: center center;
  }

今、気になるのは、他のコンポーネントで $ が使われているのに、# が使われていることです。
なので、何を使うべきでしょうか?それともどちらでも構いませんか?

CSS に関してもう一つ質問がありますが、まずは上記の質問を解決したいと思います。
もちろん試すこともできますが、どちらが正しいか確信したいです。