less.css variables initialized from database

Question

I am using dotnetless (http://www.dotlesscss.org/) for asp.net web forms applications, and it works great. I like using variables for colors, font-size etc. But so far as I can see variable values are static.

Is there any way using dotnetless to initialize these variables values from a database depending on userid?

Basically I want to convert this web application into a theme based website, so each user can select there own color, font, font-size etc.

Any direction will be greatly appreciated.

Answer 1

It is definitely possible, but unfortunately you can't query your database from LESS itself, so you basically need to write the LESS file for the user with the variable values needed, and then load it.

You can find an example from another answer here: https://stackoverflow.com/a/11628325/2330244

Answer 2

I think that if that is the path you want to take you should create a IHttpHandler to replace the dotless LessCssHttpHandler. This handler would perform basically the same actions as the LessCssHttpHandler but would insert the database variables into the less prior to compiling into css.

You can look at the Bundle Transformer LESS project which does less translation using dotless. It also has a IHttpHandler that you could base yours off of.

As others have stated this might not be the best course of action

Edit: Basic starting point for the Handler

public class LessHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var request = context.Request;
        var response = context.Response;
        var user = context.User;

        string assetUrl = request.Url.LocalPath;
        string assetPath = context.Server.MapPath(assetUrl);

        //load less file into the data.
        var data = "";
        using (var file = new StreamReader(assetPath))
        {
            data = file.ReadToEnd();
        }

        DotlessConfiguration lessEngineConfig = DotlessConfiguration.GetDefault();
        lessEngineConfig.MapPathsToWeb = false;
        lessEngineConfig.CacheEnabled = false;
        lessEngineConfig.DisableUrlRewriting = false;
        lessEngineConfig.Web = false;
        lessEngineConfig.MinifyOutput = true;
        lessEngineConfig.LessSource = typeof(VirtualFileReader);
        var lessEngineFactory = new EngineFactory(lessEngineConfig);
        ILessEngine lessEngine = lessEngineFactory.GetEngine();

        string vars = "";
        //TODO set default for vars
        if (user != null)
        {
            //TODO get vars for user
        }

        var content = lessEngine.TransformToCss(string.Format("{0}{1}", vars, data), null);

        // Output text content of asset
        response.ContentType = "text/css";
        response.Write(content);
        response.End();
    }

    public bool IsReusable
    {
        get { return true; }
    }
}

Answer 3

Why not create a custom .LESS plugin with functions to perform the needed lookup's?

The code below was tested as shown. I don't actually look up data in a DB, but all necessary information should be available to do so. I verified that when running in Windows authentication mode on the website I was able to retrieve the current user through HttpContext.Current.User.Identity.Name.

To use the function below you would type something like the below in your less file:

--lookup using custom function (hit db)
@brand_color:getCustomColor(usersThemeAttribute);

--then use the variable like normal
color: @brand_color;

Code

[DisplayName("UserProfilePlugin")]
public class UserProfilePlugin : IFunctionPlugin
{
    public Dictionary<string, Type> GetFunctions()
    {
        return new Dictionary<string, Type> 
        {
            { "getCustomColor", typeof(GetCustomColorFunction) }
        };
    }
}

public class GetCustomColorFunction : Function
{
    protected override Node Evaluate(Env env)
    {
        Guard.ExpectNumArguments(1, Arguments.Count(), this, Location);
        Guard.ExpectNode<Keyword>(Arguments[0], this, Arguments[0].Location);
        //the idea is that you would have many colors in a theme, this would be the name for a given color like 'bgColor', or 'foreColor'
        var colorAttrName = Arguments[0] as Keyword;

        //Lookup username
        // string username = HttpContext.Current.User.Identity.Name;

        //perform some kind of DB lookup using the username, get user theme info
        // UserProfile up = new UserProfile();
        // System.Drawing.Color c = up.GetColorByAttribute(colorAttrName.Value);
        //return the appropriate color using RGB/etc...
        // return new Color(c.R, c.G, c.B);
        return new Color(129, 129, 129);
    }
}

To register the plugin add this to web.config:

<dotless cache="false" >
    <plugin name="UserProfilePlugin" assembly="Your.Assebly.Name" />
</dotless>

Consider disabling caching for dotless, so that changes users make take immediate effect.

Link: https://github.com/dotless/dotless/wiki/FunctionPlugins

Answer 4

The easiest solution is probably to inline your LESS code in your web pages: (as explained here)

<html>
  <head>
    <style type="text/less">
      // DB and user-dependent code here
    </style>
  </head>
  ...
</html>

This way, you can customize your LESS stylesheets just like you would customize your webpages.

If you want to use dotless-compiled CSS, you can pass your customized stylesheets to the dotless parser:

Less.Parse(".foo { font-size: <user-dependent-value>;}")

Then, you need to include the compiled CSS output directly in your webpage:

<html>
  <head>
    <style type="text/css">
      // result of Less.Parse(...)
    </style>
  </head>
  ...
</html>

Answer 5

It depends on how many themes you're going to have. If you have a limited number, it would be best (for both performance and complexity) to map the user to one of your pre-compiled .less themes.

But if you're allowing each user to customize the theme so that there are many (or unlimited number) of them, it would be best to construct, compile, optimize the .less (or CSS) file when the theme is changed and save the result. On each page load, you reference that theme file until the user chooses a new theme. Best case, it stays cached on the user's system for a long time.

Unless it is a small amount of customized LESS/CSS, I would avoid the inline CSS route. It will add to every page's file size/bandwidth, therefore load more slowly on mobile. Instead, I would use the recent ASP.NET Web.Optimization bundle to help you construct, compile, and optimize the LESS -> CSS upon theme change and cache the result.

So on page load, most pages would reference their existing, custom page theme saved in the database. Upon theme change, you would go through the full less -> css process.