Hello Universe Hello Universe - 6 days ago 8
Sass (Sass) Question

Is it possible to pass in variables such that it adds to the actual scss variables?

I have a scss code like below

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


Now you can see that the word "hello" is repeated throughout... So is the number.

I will like to create a mixin or function such that the word and the number can be passed along as variables. Is that possible?

Answer

Pretty simple actually, Sass/SCSS offers a concatenation syntax:

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

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