在LESS中的兩個非常不同的環境中使用相同的類？

Question

比方說，我有一個名爲city-toggler的課程。

我現在有這個類在這裏：

#city { 
    .city-header { 
     .box { 
      .city-toggler { 
       //styles here 
      } 
     } 
    } 
} 

現在我需要一個city-toggler元素在網站添加到一個完全無關的地方，例如：

.footer-holder -> .footer -> .footer-section -> .city-toggler 

我怎樣做這在LESS中沒有複製上面的所有樣式？

我想我可以把city-toggler從LESS結構中分開使用，但是有更好的解決方案嗎？

Answer 1

如果不依賴於特定的上下文，定義city-toggler上下文無關沒有什麼不好。您不必複製任何代碼。

做這一點：

.city-toggler { 
    /* all styles of a default city-toggler */ 
} 

#city { 
    /* ... */ 
    .city-toggler { 
    /* overrides that apply only to city-togglers in this context */ 
    } 
} 

#footer { 
    /* same as for #city */ 
} 

，或者以不可複製的代碼（即使不是在編譯的CSS，例如通過混入），但爲了防止城市toggler在任何情況下使用，這樣做：

#city, #footer { 
    .city-toggler { 
    /* all styles of a default city-toggler */ 
    } 
} 

#city { 
    /* ... */ 
    .city-toggler { 
    /* overrides that apply only to city-togglers in this context */ 
    } 
} 

Answer 2

混入應該爲你工作：

.my-mixin{ 
     background-color:#FFF; 
    } 
    #city { 
    .city-header { 
     .box { 
      .city-toggler { 
       .my-mixin; 
      } 
     } 
    } 
    .otherplace { 
     .city-toggle { 
     .my-mixin; 
     } 
    } 
}