Sharing and Modifying Variables in dotLess

[Ashiq A.]

Hey all,

I have a curious use-case. Say I have a base .less file, which has a variable:

// site.less

@primaryColour: #660000;

body { background: @primaryColour; } 

// ... 

Now, if the user is an admin user viewing an admin page (I'll worry about that part), I want to spin the colour. My first attempt was:

// admin.less

@primaryColour: spin(@primaryColour, 180);

To achieve this, I would have Razor code like:

- import site.less

-if (admin && viewingAdminPage) {

  import admin.less

}

This didn't work (the colour didn't change). Then I tried:

if (admin && viewingAdminPage) {

  import admin.less

} else {

  import site.less

}

// admin.less

@import "Site.less";

@primaryColour: spin(@primaryColour, 180);

This also didn't work. Everything compiles, but the resulting output HTML has the original primary colour, not the spun one.

Is it possible to achieve what I want? How?

--Ashiq

[Ashiq A.]

Okay, so it turns out this is possible via three files; a common layout/site-wide .less file, and conditionally importing one of the other two .less files.

It seems like you CANNOT redefine or override a variable. This seems counter-intuitive, since trying to spin @primaryColour to (@primaryColour, 180) will give me a "compiler error", but if the variable IS included, the value won't change.

Any chance of fixing this? :)

--Ashiq

[Luke Page]

I've just had another look at variable scoping with regards imported
files. Imported files do not have scope.. so think of the import
statement like including that entire file.

If you are only controlling things via which less files to include,
you cannot expect to influence a file which has a variable declaration
and then uses it - The variable declaration overrides anything before
it and afterwards it is too late as it is a directly output mixin, not
a function mixin. e.g.

@a: red;

.func {
color: @a;
}

@a: green;

.func2 {
.func();
}

would output

.func {
color: red;
}
.func2 {
color: green;
}

so you could call the mixin after you have done the override.. but the
way you are doing it, it would need 3 files as well I think.

What I do is have a file called "theme.less" which defines the
defaults for a load of variables. Then I have a theme override file
that overrides variables to set the theme, then I have the main bulk
of less code..

If you think there is something wrong with the way variable scoping
works, please give a clear simplified example and why you think it is
wrong (and make sure you are using the latest version.. I fixed some
scoping issues a couple of months ago).