較少的CSS變量封裝和可重用的mixin

任何人都可以提供任何解決方案來將Less/CSS與封裝和mixin重用結合起來嗎？我試圖讓我的變量封裝的命名空間，但我還沒有想出如何重用mixins的。較少的CSS變量封裝和可重用的mixin

實施例：

#signup-module { 

    @button-width:  100px; 
    @button-height:  30px; 

    @textfield-width: 300px; 
    @textfield-height: 20px; 

    .width(@value, @mod:0) { 
     width: @@value + @mod; 
    } 

    .height(@value, @mod:0) { 
     height: @@value + @mod; 
    } 

} 

.home-page-signup-module { 

    #signup-module > .width(button-width, -20px); 
    #signup-module > .height(button-height, -20px); 
    #signup-module > .width(textfield-width); 
    #signup-module > .height(textfield-height); 

}

問題是，當創建一個新的模塊，寬度（）和高度（）的混入被重複。

#contact-us-module {  

    @button-width:  50px; 
    @button-height:  20px; 

    @textfield-width: 300px; 
    @textfield-height: 20px; 

    .width(@value, @mod:0) { 
     width: @@value + @mod; 
    } 

    .height(@value, @mod:0) { 
     height: @@value + @mod; 
    } 

}

有沒有辦法維持可變封裝並消除mixin重複？我想寫一次.width（）和.height（），但是：extend（）在這種情況下似乎不起作用。

更新：2014年5月15日

七個階段-MAX提供了以下重用混入一個很好的解決方案，但我想我遇到了一個變量範圍的問題，下面的語句返回一個錯誤。它說，「variable @ textfield-width是未定義的。」

.home-page-signup-module { 
    .module-a.width(textfield-width, -20px); 
}

所以我試着加入.module-a這似乎工作。我不是100％確定這是否正確，但確實解決了錯誤並返回了正確的值。

.home-page-signup-module { 
    .module-a; 
    .module-a.width(textfield-width, -20px); 
}

來源

2014-05-14 xff0000

似乎.WIDTH和.height不相同這兩個模塊中的東西，你不能讓它們公開並以這種方式使用它嗎？ – Huangism

在上面的簡單示例中它是相同的，但實際上我需要根據需要重新編寫僞私有混搭的功能。如果mixin名稱不是全局的，那麼最好不要管理這個名稱空間（保持混合名稱的簡短）。因此，例如，.signup-module.width（）不必與.contact-us.width（）相同。無論如何，下面的解決方案几乎可以解決它。謝謝！ – xff0000

說出你的更新。嗯，我不知道是什麼使'@ textfield-width'不可見的上下文。你的解決方法是可行的（實際上你甚至不需要重複'.module-a'，只需'.module -a; .width（textfield-width，-20px）;'應該就足夠了）將不能在同一個作用域中使用多於一個模塊：如果@ textfield-width不可見，不會將「模塊」暴露給當前作用域，那麼任何mixin將使用最後調用的*所暴露的變量模塊，而不是mixins本身的模塊（例如'module-a.width'將使用'module-b'變量）。 –

你可以收集共享混入到另一個命名空間/混入並擴大它在每個「模塊」您的需要，像這樣的例子：

.shared-stuff() { 
    .width(@value, @mod: 0) { 
     width: @@value + @mod; 
    } 

    .height(@value, @mod: 0) { 
     height: @@value + @mod; 
    } 
} 

.module-a { 
    .shared-stuff(); 

    @button-width:  100px; 
    @button-height: 30px; 

    @textfield-width: 300px; 
    @textfield-height: 20px; 
} 

.module-b { 
    .shared-stuff(); 
    @button-width:  200px; 
    // etc. 
} 

// usage: 
.home-page-signup-module { 
    .module-a.width(button-width, -20px); 
    .module-b.width(button-width, +33px); 
}

來源

2014-05-14 18:33:24

很酷。謝謝七個階段 - 最大。解決了它。 – xff0000

較少的CSS變量封裝和可重用的mixin

回答

相關問題