如何使用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; 
}