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

Question

我有三个共享许多属性的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; 
     } 
    } 
} 

但是没有工作，因为我是假设排料将继承规则（其中，显然，事实并非如此）。所以我再次尝试，这次使用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://less2css.org/）时，我收到错误，说明我正在使用的mixin类未定义。

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

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

Answer 1

我认为你使用mixin解决方案时遇到的问题是你在mixin的定义中使用了mixin。

你需要完成定义混入你使用它之前，像这样：

LESS：

.cell { 
    background:red; 
} 

.cell-empty { 
    .cell 
} 

CSS的输出将是：

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