Можно ли передавать переменные таким образом, чтобы они добавляли к фактическим scss-переменным?

Question

У меня есть код SCSS, как показано ниже

.hello-station { 
    &-hello123 { 
    .site-logo__image { 
     @extend .logos--hello-123; 
     margin: 27px 0; 
     } 
    } 
} 

Теперь вы можете увидеть, что слово «привет» повторяется в течение ... Так это число.

Я хотел бы создать mixin или функцию, чтобы слово и число могли передаваться вместе как переменные. Это возможно?

Answer 1

Довольно просто на самом деле, Sass/SCSS предлагает конкатенации синтаксис:

$word: 'hello'; 
$number: 123; 

.#{$word}-station { 
    &-#{$word}#{$number} { 
    .site-logo__image { 
     @extend .logos--#{$word}-#{$number}; 
     margin: 27px 0; 
    } 
    } 
}