如何使用少的嵌套类之间共享样式规则

Question

我有三个共享多个属性的CSS类：细胞空，细胞记录左左和细胞记录右。

这是我最终要产生的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;
      }
   }
}

这是不起作用的，因为我假设嵌套将继承规则（显然，它没有）。因此，我再次尝试，这次使用Mixins，例如：

.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（使用此站点：http：//lesss2css.org/）时，我会收到我使用的Mixin类未定义的错误。

所以，我很困惑。我可以少做什么来简化我的CSS，这样我就不会一遍又一遍地重写相同的样式？

我非常感谢任何帮助。谢谢！

Answer 1

我认为您使用Mixin解决方案遇到的问题是您在Mixin的定义中使用Mixin。

您需要在使用混合蛋白之前完成定义混合蛋白，例如：

少：

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

CSS输出将是：

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