CODEWITHSUNDEEP
sass
Hello Universe
Hello Universe

Reputation: 3302

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?

Upvotes: 1

Views: 30

Answers (1)

Seimen
Seimen

Reputation: 7250

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

Upvotes: 1

Related Questions