DOTLESS - user variables

I am writing an ASP.NET MVC application, and I plan to use LESS for style sheets using the dotless compiler. I want to make my application available for use and found that I can use LESS variables to set styles.

What is the best way to implement this?

I want to be able to redefine variables in nested hierarchies. I have a site variable that contains all the variables. Now I want each client group to have its own specific redefinition. Then I want each client to have its own overrides, but with "group defaults" if some variables are not defined. Then I want the "user" to redefine (for each client there were several users).

One of the alternatives that I was thinking about was that I create a variables.default.less file that defines all the variables. Then I create one override file, overriding only the changed variables. This allows me to create a smaller custom 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 client 55 logs on (he belongs to customergroup01 group), 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 (client 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 use case? Can I edit less configured files on the fly or somehow compile them?

Thank!

+3
1

?

. , , . . "" , , "", ( t-).

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;
}

. , (, ), , . .

0

All Articles