Declare variable conditionally in LESS css

Problem

I currently have two Views that are using the same layout. However, they differ from each other in the following aspect:

View Foo:

<div class="MajorSection" id="foo">
</div>

View Bar:

<div class="MajorSection" id="bar">
</div>

And I want to declare @labelWidth differently between these two classes in one .less file so that I don't need to repeat myself with the following code.

.MajorSection {
    @labelWidth: 10em;

    .editor-label {
        width: @labelWidth;
    }

    input, textarea {
        width: (@editorWidth)-(.5em); //border & padding
    }
}

In View Foo I want @labelWidth to be 10em, and in Bar I want it to be 20em. Is there anyway to do that?

Problem courtesy of: albusshin

Solution

I think the simplest method to achieve this is to define "depended" styles via parametric mixin, e.g.:

.MajorSection {

    #foo& {
        .labelStyles(10em);
    }

    #bar& {
        .labelStyles(20em);
    }

    .labelStyles(@width) {
        .editor-label {
            width: @width;
        }
    }

    input, textarea {
        width: (@editorWidth - .5em); // border & padding
    }
}

CSS output:

#foo.MajorSection .editor-label {
  width: 10em;
}
#bar.MajorSection .editor-label {
  width: 20em;
}
.MajorSection input,
.MajorSection textarea {
  width: ...;
}
Solution courtesy of: seven-phases-max

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.