Trying to concatenate Sass variable and a string

Question

I'm trying to concatenate a Sass variable with a string. How do I do it?

Below there is a code example.

@mixin setIcons($pathImages:$pathImages, $extensionIcon:$extensionIcon {
   @each $class-icon in $class-icons-30 {
     .snw-tui-icon-#{$class-icon} {
       @include icon($class-icon, $pathImages, $extensionIcon, 30px);
   }
     .snw-tui-icon-**#{$class-icon} + "selected"** {
       @include icon(**$class-icon + "selected"**, $pathImages, $extensionIcon, 30px);
  }
}

Answer 1

You want to interpolate.

$sidebar-width: 20px;

.target {
     width: calc(100% - #{$sidebar-width});
}

Hope this helps

More info into it here: https://webdesign.tutsplus.com/tutorials/all-you-ever-need-to-know-about-sass-interpolation--cms-21375

Answer 2

For a font variable, this is what worked for me:

$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-custom: 'My Custom Font', #{$font-family-sans-serif}

Good Luck