Sass scss如何重用内部选择器？

我有这样的代码：

.outer1 {
  &.same-inner {
    background-color: white;
  }
}

.outer2 {
  &.same-inner {
    background-color: white;
  }
}

.outer3 {
  &.same-inner {
    background-color: white;
  }
}

如何重复使用。相同的内部选择器

.outer1, .outer2, .outer3 {
  &.same-inner {
    background-color: white;
  }
}

翻译成CSS：

.outer1.same-inner, .outer2.same-inner, .outer3.same-inner {
  background-color: white;
}

.same-inner, .outer1, .outer2, .outer3 {
  background-color: white;
}

.outer1 {
  width: 10px;
}

.outer2 {
  width: 20px;
}

.outer3 {
  width: 30px;
}

或者，如果您想赋予每个外部对象有自己的属性，但也要继承相同的内部对象

.same-inner {
    background-color: white;
}

.outer1 {
    width:10px;
    @extend .same-inner  
}

.outer2 {
    width:20px;
    @extend .same-inner  
}

.outer3 {
    width:30px;
    @extend .same-inner  
}

翻译成CSS：

.outer1.same-inner, .outer2.same-inner, .outer3.same-inner {
  background-color: white;
}

.same-inner, .outer1, .outer2, .outer3 {
  background-color: white;
}

.outer1 {
  width: 10px;
}

.outer2 {
  width: 20px;
}

.outer3 {
  width: 30px;
}

或者你想要的是：

.same-inner {
    background-color: white;
    
   &.outer1 {
        width:10px;
        @extend .same-inner
   }

   &.outer2 {
        width:20px;
        @extend .same-inner
   }
   
   &.outer3 {
        width:30px; 
        @extend .same-inner
   }
    
}

它大量生产CSS：

.same-inner, .same-inner.outer1, .same-inner.outer2, .same-inner.outer3 {
  background-color: white;
}

.outer1.same-inner {
  width: 10px;
}

.outer2.same-inner {
  width: 20px;
}

.outer3.same-inner {
  width: 30px;
}

---

您可以通过@extend重用选择器

按照此操作

在