SASS - 使用变量组合两个类

Question

我希望得到使用变量的组合类，它引用组件类名但不输出任何东西

.component-name {
  $this: &; // $this = '.component-name'

  &--small { ... }

  &--secondary {
    &.#{$this}--small { // THIS doesn't work
      // Should output .component-name--secondary.component-name--small
    }
  }
}

Answer 1

我不太确定你要做什么，但首先看一下，我开始工作的一种方法是首先设置类名变量。

$compname: component-name;

.#{$compname} {

  &--small {
    //font-size: 1px;
  }

  &--secondary {
    //font-size: 2px;

    &.#{$compname} {
      &--small {
        font-size: 3px;
      }
    }
  }
}

输出.component-name--secondary.component-name--small { font-size: 3px; }