是否可以传入变量以使其添加到实际的scss变量中？

Question

我有一个scss代码，如下所示

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

现在你可以看到“hello”这个词在整个过程中重复出现......数字也是如此。

我想创建一个mixin或函数，使得单词和数字可以作为变量传递。这可能吗？

Answer 1

实际上很简单，Sass / SCSS提供了一种连接语法：

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

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