Css 如何使用更少的资源在嵌套类之间共享样式规则？

我有三个CSS类，它们共享许多属性：cell empty、cell record left和cell record right

这就是我想要最终生成的CSS：

.cell-empty {
   background-color: red; //shared between all cells
   border: 1px solid black;
}

.cell-record-left {
    background-color: red; //shared between all cells
    text-indent: 15px; //shared between both .cell-record-left & .cell-record right
    border-right: 1px solid #DFE5ED;
}

.cell-record-right {
    background-color: red; //shared between all cells
    text-indent: 15px; //shared between both .cell-record-left & .cell-record right
    border-left: 1px solid #DFE5ED;
}

所以我想我会用更少的资源来简化我的类，使用嵌套。这是我第一次制作的：

.cell {
    background-color: red; 

    &-empty {
      border: 1px solid black;
    }

    &-record {
      text-indent: 15px;

      &-left {
        border-right: 1px solid #DFE5ED;
      }

      &-right {
        border-left: 1px solid #DFE5ED;
      }
   }
}

然而，这不起作用，因为我假设嵌套将继承规则，而很明显，它不会。所以我再次尝试，这次使用mixin，如下所示：

.cell {
    background-color: red; 

    &-empty {
      border: 1px solid black;
      .cell;
    }

    &-record {
      text-indent: 15px;

      &-left {
        border-right: 1px solid #DFE5ED;
        .cell;
        .cell-record;
      }

      &-right {
        border-left: 1px solid #DFE5ED;
        .cell;
        .cell-record;
      }
   }
}

然而，这似乎也不起作用。当我使用这个站点查看计算的CSS时：我收到的错误是，我使用的mixin类没有定义

所以，我很困惑。我能用更少的代码做什么来简化我的CSS，这样我就不会一次又一次地重新编写相同的样式了

---

我非常感谢任何帮助。谢谢大家!

我认为mixin解决方案的问题在于，您在mixin的定义范围内使用mixin

您需要在使用mixin之前完成定义，如下所示：

减：

css输出将是：

.cell {
  background: red;
}
.cell-empty {
  background: red;
}

.cell {
  background: red;
}
.cell-empty {
  background: red;
}