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

Sorry, what is the value that you are expecting for the `background` of `div`? Is it not red? — Harry, Nov 17 '14 at 14:06
Sorry, I'm expecting the background of the BODY to be red in this case — brightemo, Nov 17 '14 at 14:14
There is an option using an unnamed namespace (`&`) like shown [here](http://codepen.io/hari_shanx/pen/mydgMg). But I am not really sure if this is the only/best option. I will add this as answer if there is no other better answer provided. — Harry, Nov 17 '14 at 14:18
Unfortunately I can't modify the body/background bit like you have done in the linked codepen. (Copying it in to the namespace). — brightemo, Nov 17 '14 at 14:26
Oh ok. I assume it is probably because you are trying to do it for multiple selectors and/or properties. But I don't really think there is an alternate option. Atleast none that I am aware of. — Harry, Nov 17 '14 at 14:28
By the way, instead of setting `responsiveState` variable, can't you not directly set the `myColour` (and all required vars)? — Harry, Nov 17 '14 at 14:30
I'm trying to override bootstrap variables, so there are quite a few. PHP-Less sets the variables before importing the .less files so it would be just overwritten anyway. The variables I'm attempting to modify are used all over the place (including media queries). — brightemo, Nov 17 '14 at 14:36

score 0 · Answer 1 · answered Nov 17 '14 at 23:47

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 )

Override global variables from within a mixin function

1 Answers1