Theme with variable width inside settings

UX
4

Hi again!

I want to add settings to my theme but I have a few questions about it.

I looked into the welcome-banner component because there is a setting to upload an image as background and other settings related to the background.

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>

And in the css file is this:

.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;
  }

What irritates me now is the use of # instead of $ like in other components I had a look.
So what do I need to use? Or doesn’t it matter?

I have another question about CSS, but first I want to solve the question above.
Of course I could try it but I want to be sure which is correct.