Override global variables from within a mixin function

Question

So I am trying to override some "global" variables based on a variable passed in from the php-less compiler.

I'm not sure if I am doing something wrong, or if it is just not possible due to the scope?

EDIT: I'm trying to get the background of the body to be red in this case.

external.less

// From external less stylesheet that I can't/don't want to modify
@myColour: blue;

body {
    background: @myColour; // always blue
}

my.less

@import "external.less"

// My styles
.setResponsive(@responsive) when (@responsive = on) {
    @myColour: green;
}
.setResponsive(@responsive) when (@responsive = off) {
    @myColour: red;
}

@responsiveState: off; // actually being set from compiler
.setResponsive(@responsiveState);

div {
    .setResponsive(@responsiveState);
    background: @myColour; // red
}

http://codepen.io/anon/pen/gbOymJ

Answer 1

You are using the Mixins as Functions:

Variable defined directly in callers scope can not be overriden.

In your situation both @myColour: blue; and .setResponsive(@responsiveState); are in the same scope (the main scope). So what you are trying is not possible.

You should re-declare all the variables at the end of your code (using the same mechanism your are using to set @responsiveState )