CODEWITHSUNDEEP
csslessless-mixins
xff0000
xff0000

Reputation: 53

Less CSS variable encapsulation and reusable mixins

Can anyone offer any solutions for combining encapsulation and mixin reuse for Less/CSS? I'm trying to keep my variables encapsulated by namespace, but I haven't figured out how to reuse mixins for it.

Example:

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

}

The problem is when I create a new module, the width() and height() mixins are repeated.

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

}

Is there a way to maintain variable encapsulation and eliminate the mixin repetition? I'd like to write .width() and .height() once, but :extend() doesn't seem to work in this context.

Update: May 15, 2014

seven-phases-max offered a great solution below for reusing mixins, but I think I ran into a variable scope issue and the statement below returned an error. It said, "variable @textfield-width is undefined."

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

So I tried adding .module-a which seems to work. I'm not 100% sure if this is correct usage but it does fix the error and return the correct value.

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

Upvotes: 2

Views: 691

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

You can collect shared mixins into another namespace/mixin and expand it in each "module" you need, something like this for example:

.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);
}

Upvotes: 1

Related Questions