css - CSS 変数のカプセル化と再利用可能な mixin の削減

Question

Less/CSSのカプセル化とミックスインの再利用を組み合わせるためのソリューションを提供できる人はいますか? 変数を名前空間でカプセル化したままにしようとしていますが、ミックスインを再利用する方法がわかりません。

例：

#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 );

}

問題は、新しいモジュールを作成するときに、width() と 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;
    }

}

変数のカプセル化を維持し、ミックスインの繰り返しをなくす方法はありますか? .width() と .height() を一度書きたいのですが、このコンテキストでは :extend() が機能しないようです。

更新: 2014 年 5 月 15 日

Seven-phases-max は mixin を再利用するための以下の優れたソリューションを提供しましたが、変数スコープの問題に遭遇し、以下のステートメントがエラーを返したと思います。「変数 @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);
}