Question

I’m trying to use DotLess in a project, but I’m running into an issue I cannot seem to resolve. I am trying to extend a pre-existing CSS file (which is actually from JQuery UI) by using a LESS mixin in my own custom file.

In jquery-ui-1.8.20.custom.css:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #79b7e7; background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1d5987; }

And the relevant portions of my custom.less file:

@import "./jquery-ui-1.8.20.custom.css";

.sortable-list li:hover {
    .ui-state-hover;
}

When I try to compile this with the following DotLess command:

.\dotless-compiler -m [LESS_FILE_PATH]\custom.less .\custom.generated.css

I receive the following error message:

.ui-state-hover is undefined on line 92...
[91]: .sortable-list li:hover {
[92]:     .ui-state-hover;
  ----^
[93]: }[Done]

a) Does anyone know if I’m missing argument(s) to the command line compiler? (Documentation for it would really be nice…)

b) If not, is there some inherent shortcoming of LESS that cannot handle the situation I have described? Extending existing CSS files that you cannot touch seems like an extremely common use case.

Answer 1

change the file extension of your import into .less – otherwise it assumes it is actually css and imports the text verbatim, without any less processing.

If you run the dotless compiler without arguments it shows you all the allowed arguments. One is
-a –import-all-less – treats every import as less even if ending in .css

so you could try that instead of renaming the file.

You might then find there is something that needs to be escaped, but fingers crossed it will work.