LESS Preprocessor

by Ondrej Machala
LESS Preprocessor preview

Price

$0

Details

Licence:
Apache 2.0, Microsoft Public License
Works with:
8.0, 8.1, 8.2, 9.0, 10.0
Version:

Summary

LESS is a dynamic stylesheet language that extends CSS. The features of LESS allow you to write stylesheet code that is shorter and easier to maintain.

Description

With the LESS Preprocessor, you can create stylesheets containing LESS syntax in Kentico. The stylesheets store both the LESS code and the compiled CSS output. When you assign the stylesheets to pages, browsers automatically receive the plain CSS version.

Note: The Less preprocessor relies on the Jurassic library which is no longer in development. You may run into issues when compiling Less style sheets on the server side. I recommend using a different compilation tool, e.g., the Visual Studio Web Compiler extension.

Comments


Ondrej Machala commented on

Bryan, I'm glad you like it. However we don't plan on extending the concept to other areas.

Bryan commented on

This is a great tool. Are there any plans to extend this concept to other areas of the system, such as Web Parts CSS?

Heather Downing commented on

Just putting this here for anyone having issues importing files - make sure you:
A. Leave off the extension (.less) in the code name
B. Do not use periods (.) in the code name
C. Do not use dashes (-) in the code name

WORKS:
@import "yourlessfilename"

WILL NOT WORK:
@import "yourlessfilename.less"
@import "your.less.file.name"
@import "your-less-file-name"

Just spreading the knowledge.

Ondrej Machala commented on

Hi Juan,
Unfortunately, there is no way to upgrade Less stylesheets for v7 to Less preprocessor for v8 directly as these are a different kind of product whose are not mutually compatible. Less stylessheets for v7 is rather like an additional module whereas Less preprocessor for v8+ is an integration with the existing CSS stylesheets application. Your existing Less stylesheets are not lost, you can still find them in customtable_LessStylesheet table.

Juan Alchourron commented on

Hello,

I was using Less on my Kentico 7 version.
Now, after the upgrade to 8.2.4, do I need to uninstall the old Less version and then install the new one for K 8 ?
Can you tell us the right procedure to do it ?

Thank you

Dan commented on

Hi,

When importing my supporting stylesheets, it was found that you CANNOT HAVE A PERIOD (.) IN THE CODE NAME of the file you're trying to import!

Hopefully this saves others a little time with troubleshooting.

All-in-all, this product is great! Love that I can easily bust out some LESS CSS and keep everything nice and organized. Great job as always, Kentico!

Thanks!

jjason-MTllc commented on

ONDREJ,
I think what I did wrong was initially I was importing with the full path and file extension of the .less files. Since I was actually calling on .less files (incorrectly) I needed the mime type for the server to access them. So you are correct, when properly importing you do not need to touch the web.config file. In my haste to get started with LESS in Kentico I overlooked the details for importing other LESS files within the CMS.

On a new topic, I am finding that it would be nice to be able to denote which LESS files are Root files and should be compiled, versus helper files that are imported into the root and should not be compiled to CSS separately. For example I have 7 .less files that are imported into one root file. One of those imported files contains my common variables. If I try to save other files that reference those variables into the CMS then I get 'variable undefined' errors. My solution has been to store my helper .less files outside of the CMS. That way only the root file is compiled and it pulls in the helper files at compilation.

Another option is to import my variables file into each of my other files that reference it. I decided against this since it wasn't important for me to have all of my code within the CMS. I'm using my own version control anyways so having the files outside of the database works fine.

Ondrej Machala commented on

Hi,

I have fixed the issue reported by Ryan (resolving URLs against current domain). Please install the latest hotfix (8.0.12] and then you need to download and install Less preprocessor package again to solve the problem.

Ondrej Machala commented on

Justin,

Actually, ".less" MIME type isn't needed at all because, in fact, no files with ".less" extension are requested on the server. Does the server error you mentioned occur everytime you save style sheet that uses @import statement?

Ondrej Machala commented on

Ryan,

If you modify helper style sheet then you also have to manually re-save the main style sheet. This is by-design behavior (also mentioned in instructions file) however I admit it might be quite inconvenient. I will consider to add this feature in the next version. Regarding your issue with resolving URLs against current domain, I'm gonna have a look at it and I will let you know ASAP.

Justin Jason commented on

ONDREJ,
I'm not sure if the server error was something wrong on our end since we did a multiple-step upgrade from 5.5 to 6 to 7 and finally to 8. Perhaps on a clean Kentico 8 install the LESS mime type already exists and our older config files did not account for them? Either way it was adding that mime type that fixed the 500 error.

Regarding the @import, I realize I was doing it wrong at first. I was improperly pointing to the path of the virtual files rather than using the code name. I discovered the correct import syntax and got it fixed.

Otherwise I'm with Ryan in that changes to imported helper LESS files are not compiled into the master file until I re-save the master file (I think I even had to check it in too). This currently presents a challenge as I just broke my styles out into 8 separate sheets imported into a single master LESS file.

Ryan commented on

I have another issue but I am not sure if it is the LESS compiler or a function of Kentico.

If my LESS file has a class with an entry like "background: url(/images/pin_it.png) no-repeat;" and I am developing from a development URL like http://mydevbox, the compiled file has my hostname appended to the beginning like "background: url(http://mydevbox/images/pin_it.png) no-repeat;" which is not what I want. Is there a way to prevent this?

Ryan commented on

I noticed that making a change to a helper LESS file does not recompile any master LESS files that @import the helper file automatically. The only way to do that is to open the master LESS file and click Save. Is there a way for the system to recompile any LESS files with @import references to the helper LESS files automatically when the helper files are modified?

Ryan commented on

ONDREJ,

I downloaded the module from above and it seems to have fixed my issue. I am assuming the DLL files are what changed since the JS files in ~/CMSScripts/CMSModules/CMSLessCss appear to be identical. Thanks for getting this fixed so quickly!

Ondrej Machala commented on

Hi,

Sorry for the long silence. Steve and Ryan were right, there really was a problem with @importing style sheets when CSS minification was turned on. I have re-uploaded a new package where the issue is fixed. I'm sorry about any inconvenience.

Justin, thank you for your feedback but actually I didn't get your point. There are no additional steps (such as allowing .less extension in web.config) required to be able to @import Less style sheets even if they are stored in the file system. Just use the following syntax: @import "<style sheet code name>";. Does it work for you? Or could you provide me more details?

Justin Jason commented on

I wanted to share my own experience and minor hurdles getting {LESS} fully working on our Kentico 8 site.

I had no problems getting everything set up and working in general. The instructions were clear and easy to follow. I created a few placeholder stylesheets and was about to start getting into the trenches coding when I hit a snag.

@import "another-less-file";

Importing another less file into my primary .less stylesheet resulted in a 500 error.

After some hunting I was able to resolve the issue with these steps:
1. update my web.config to include the mimetype for .less extensions:
<system.webServer>
...
<staticContent>
<mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>
</system.webServer>

This resolved my 500 error, but then I had a 404 error instead.

2. I'm using Source Control on my stylesheets and so have them stored in the file system. To successfully import a file I needed to include the full directory path of my targeted .less file:
@import "/CMSVirtualFiles/CSSStylesheets/another-less-file.less";

Things are moving along smoothly now and I couldn't be more happy to be able to use LESS with a Kentico site!

Ryan commented on

I have verified what Steve posted on Apr 29, 2014. If CSS minification is turned on, the LESS validator does not allow you to save certain file patterns.

For instance, I have a series of LESS files that manage variables, functions, mixins, etc. I use @import (reference) to include these in module LESS files like _footer, _nav, etc. Those compile in the editor just fine. However, if I @import those into a master LESS file called Globals, I get errors. Looking at the request through the Chrome console shows that the modules are coming back minified which seems to cause the LESS compiler to choke. With CSS minification turned off, everything works as expected. I would like to have CSS minification turned on. It would make more sense if the editor never got the minified version regardless of the global setting to avoid these compilation issues.

FYI, you can turn CSS minification off in Kentico 8 at Configuration > Settings > System > Perfomance

Steve commented on

I ran into an issue with the LESS Preprocessor in Kentico v8 with CSS minifcation enabled while attempting to import other LESS stylesheets. Once disabled, it worked without issue. If enabled, it seemed to produce syntax errors that would keep the file from being saved.

kentico_ondrejv commented on

Hi,

LESS module for version 7 can still be downloaded here: http://devnet.kentico.com/marketplace/modules/less-stylesheets

Cheers