DOTLESS - user specific variables

Question

I am writing an ASP.NET MVC application and I plan to use LESS for stylesheets using the Dotless compiler. I want to make my application skinnable and found that I can use LESS variables to customize the styles.

How do I best implement this?

I want to be able to override the variables in nested hierarchies. I have a site wide variables.less which contains all variables. I now want to allow each group of customers to have a their specific overrides. Then I want each customer to have their own overrides, but with the "group defaults" if some variables are not defined. Then I want "user" overrides (there are several users per customer).

One alternative I thought of was that I create a variables.default.less file which defines all variables. I then create one "override" file redefining only the changed variables. This allows me to create a user specific less file to include all nested variable overrides.

Examples:

variables.default.less

@bgcolor: #ffffff;
@textcolor: #000000;
@fontsize: 12px;
@logo: "site-default.png";

variables.customergroup01.less

@bgcolor: #cccccc;
@textcolor: #999999;

variables.customer99.less

@logo: "customer-logo99.png";

variables.user1234.less

@font-size: 18px;

Now if customer 55 logs in (he belongs to customergroup01), he gets the following stylesheet

// Import default vars
@import "variables.default.less";

// Import customized vars
@import "variables.customergroup01.less";

// This is the actual stylesheet
@import "styles.less";

Now if user 1234 (customer 99 and customergroup01), he gets the following stylesheet

// Import default vars
@import "variables.default.less";

// Import customized vars
@import "variables.customergroup01.less";
@import "variables.customer99.less";
@import "variables.user1234.less";

// This is the actual stylesheet
@import "styles.less";

Is this a usable pattern? Do I render the customized less files on the fly or create somehow precompile them?

Thank you!

did you ever solve your puzzle, and would you like to share it with us — lordkain, Jun 02 '14 at 08:29
consider to read http://stackoverflow.com/questions/10797661/changing-dotless-parameters-dynamically and http://stackoverflow.com/questions/17276966/how-to-change-value-dynamically-variable — Bass Jobsen, Oct 06 '14 at 23:25

score 0 · Answer 1 · answered Nov 04 '14 at 10:37

Is this a usable pattern?

I would say so yes. Your requirement is to create different stylesheets based on a user and this seems a sensible approach. My implementation is slightly different. I generate a "base" stylesheet that contains all the core styles and then create a separate "theme" stylesheet that contains the customised styles (and these styles have their own classes prefixed t-).

Example

Site.less

@import "variables.less";
@import "styles.less";

Theme.less

@import "theme-variables.less";

// theme class
.t-btn-submit {
    background-colour: @t-btn-submit-bg;
}

This approach gives me a nice separation of concerns between the changeable styles and the core styling. I know that if I change the core styling (maybe remove classes) it won't break the theme as they have separate classes. It also simplifies the process and makes it more manageable when updating or changing.

DOTLESS - user specific variables

1 Answers1