Less Compiler in Custom CMS

May 19th, 2017 10:00 am

By Justin Jordan

We recently started talking about how useful it would be to use a CSS pre-compiler, like Sass or Less, on our projects built with Avallo Custom CMS. It would allow our designers to turn colors and frequently used styles into variables and allow them to take advantage of all the extra functionality these systems provide. Only problem was, in order to make use of these technologies, our designers would have to write their styles in a separate text editor, compile the code into CSS using the command line or a desktop app, and then copy and paste it into the CMS text editor. It would work, but would be cumbersome to have to bounce around between several different apps just to style a website, especially when making frequent changes.

Finding a Solution

At this point, it was clear that we needed to build a compiler into the CMS. We started looking around for a PHP based compiler that would work with our framework and Custom CMS and we decided it’d be best to only support either Sass or Less to reduce complexity and prevent accidental mixing of the two. In the end, we chose to support Less, but not because it’s necessarily better than Sass. There were a few reasons that factored into this decision...

Similar to Vanilla CSS

Less looks more like vanilla CSS, which makes it much easier to grasp for those already familiar with CSS. Designers who are not used to seeing dollar signs and variable declarations might feel like a fish out of water writing Sass for the first time. Less, on the other hand, uses special characters and syntax CSS developers are used to seeing, so styling with Less isn't much of leap.

Easy to Install

The biggest determining factor was to find a solution that didn’t require anything to be installed on the server. We build a lot of websites, though many are hosted on our server where we have a custom environment ready to go, some clients opt to host their own sites, so we want to keep Custom CMS as easy for us to install as possible. Therefore, we wanted a compiler that was in the form of a PHP library. Sass has a PHP based compiler; however, it’s a PHP extension that would have to be installed on our server and our clients’ servers in order for it to work. Luckily, Less has PHP libraries that could be bundled with Custom CMS and included programmatically without the extra server setup.

Building the Solution

Once we had decided on what pre-compiler to use, we had to implement it. I started playing around with different ways I could incorporate the compiler into the Custom CMS admin panel—adding a compile button, making a dropdown menu for code type, or even requiring a special tag on Less files—but everything seemed to overcomplicate things when the point was to make things easier. I wasn’t entirely sure how it should work until it occurred to me, it makes no difference to the Less compiler whether you compile Less or vanilla CSS. If the code doesn't contain any Less, the compiler, more or less, just passes the CSS through. I decided to just compile the code no matter what and call it a day. The beauty of our Custom CMS is that the styles are already being combined and cached into a single file to prevent unnecessary server requests, so I was able to take advantage of this caching by inserting the compile process right before the code is written to the file system. Aside for some special code for displaying syntax errors, the solution was dead simple, and works better than expected. Now Avallo Custom CMS lets you sprinkle in LessCSS into your styles as much or as little as you want.

In Practice

The outcome has even better than expected. We've been using LessCSS in Custom CMS for a couple months now, and honestly, it's easy to forget the feature is even there. The only time it makes itself known is when there's a syntax error in your code, which displays a message telling you where the error has occurred. It's really convenient that variables can be used across different files. We mostly use this to keep all our color variables in one place, which makes it super easy to make theme changes on the fly. Ultimately, it was definitely worth adding this feature to Custom CMS and we look forward to using it to increase efficiency and lower production times on new websites.