Jozsef Koller

Working with LESS + LESS Hat + Sublime Text

The CSS specification has evolved a lot in that last five years and many long-awaited features have been implemented in the major browsers since then. This sounds great but  CSS3′s brought some really hard issues while the syntax basically remained the same as it was before. I’m talking about those well-known browser prefixes, absence of nesting and so-called mixins. In this article I’ll show you my own method of css coding using the latest LESS and LESS Hat version. If you are dedicated to Sass you can skip this article but I won’t bite you if you read on. Goals Okay, I want to write LESS with LESS Hat mixin in Sublime Text 2 (or 3) but I don’t want to include any LESS parsing JavaScript script in my client side code. (Not even in development phase.) In this case I’ll need to compile LESS files so the browsers can process the style sheet(s) natively. After that I want the compile process to be done automatically and “silently”. It’s not as complicated as It might seem. I’m assuming you know LESS syntax and Sublime Text already so if you don’t, I suggest you to check them out first. Environment First of all we can’t start without Sublime Text 2 or 3. I’ll stick with the second major release for this article but almost everything is the same in both version. The third version is still in beta but stable enough for daily use, it’s your choice. Once you’ve decided we’ll need two awesome plugins for Sublime Text: sublime-less2css: This plugin runs the compiler when it’s needed. LESS-sublime: Syntax highlighter for LESS. It’s really to easy to install plugins manually for Sublime Text but you better save your time using Package Control. I’ll do so. I’d love to say “that’s all” but unfortunately Less2Css can’t compile LESS files on its own, it depends on external compiler to make things happen. On Windows you’ll need less.js-windows. On OS X / Linux you have to install NodeJS after that, you can get LESS via its packet manager. (I’m working on Windows 7 so if you’re using another OS you might need to do some research because some of the listed tools are OS specific.) Now you know everything you need so let’s do some real tutorial. Installing Sublime Text and its plugins If you don’t have Sublime on you machine simply go to SublimeText.com, find you prefered version, download and install it. It’s free for personal use and it’s available for all the 3 major OS. The install should be pretty straightforward for any user so I won’t waste your time. Unfortunately the best plugin called Package Control is not shipped with the stock Sublime so that will be the next. Visit the Package Control installation page and follow the instructions. Be sure you choose the right Package Control version because the default is for the third version. (You will get an error in Sublime if you chose poorly.) When Sublime Text and Package Control have been installed we can easily move on with LESS related plugin installation. While you are in Sublime Text press ctrl+shift+p on Windows/Linux or cmd+shift+p on OS X, type “package control install” then press enter. Now you can see all the available extensions, the two we need is Less2Css and LESS. (Note that these plugins are identical to those I’ve mentioned above despite their names are different.) We have everything we need in Sublime Text. If you are looking for plugin related settings you can find them few lines later. LESS compiler For Windows The easiest option is less.js-windows that you can download from here. (Or you can clone the git repository but for those who rarely or never used Git it will be easier to simply download the whole thing as zip.) You can extract the package anywhere you want. I’ve placed mine into c:/XAMPP/lessc/. Okay, now we should edit the environment variables according to less.js-window folder. Press Windows button and type the following “environment variables” into the search field then press enter. (Additional help here.) Now add the path to your local less.js-windows folder at the end of the path variable. Important: Multiple items have to be separated by semicolon. (Eg.: c:\Program Files\Java\jdk1.7.0_15\bin\;C:\XAMPP\php\;C:\XAMPP\lessc\) Double check that the folder which you’re referring to contains the lessc.cmd. This is important! You can test if lessc is working if you type lessc -v into cmd, if you’ve done everything right you’ll see the LESS version number. For Linux/Mac users I don’t know if there is any other methods so if you do know easier or better way please leave a comment below. Anyway go to NodeJS.org and get the latest version then install like you would do with other applications/programs. Open up terminal and run npm install less -gd, this command will install LESS in no time. (Depending on your OS you can use package managers to fetch NodeJS using one or few lines of code. Click here for more info) Configure Less2Css Open the default settings file for Less2Css then copy everything and paste into Less2Css User settings file. (In Sublime open Preferences > Package Settings > Less2Css > Settings – Default / User.) In the settings file which is a simple JSON file you can find many options but there is the main three: showErrorWithWindow: Highly recommended to set it to true otherwise you won’t see parsing error messages if your LESS file is broken. autoCompile: If it’s true the compiler executes each time you save you less files. minify: It’s absolutely your choice. With value true the compiler will remove every unnecessary chars like spaces, some semicolons, comments etc. If you want to keep a comment you can use an exclamation mark at the very beginning of the comment block. If you want to know more about the global and project level settings go to the official Less2Css docs. Using LESS + LESS Hat At the time of writing this article, the latest LESS version is 1.5 and LESS Hat 2.0.3 so if you are using newer versions you might need check the updated docs. For the last step download the most recent LESS Hat and extract the compressed file wherever you want. (Honestly the only file we need is lesshat.less from the build folder or the lesshat-prefixed.less if you’re already using some mixin collection already.) Now open your main less file and use to following line to include LESS Hat mixins: @import "lesshat/build/lesshat.less"; Basically now you can use every mixins from LESS Hat. There are so many possibilities in LESS Hat I can’t even show the tenth of them. (LESS Hat docs) Here is an example LESS code using few of the recently imported mixins: @import "lesshat/build/lesshat.less"; @bradius: 5px; div.wrap { position: relative; .background-image(linear-gradient(0deg, #F2F2F4 15%, #FFF 100%)); .border-radius(@bradius); .box-shadow(1px 1p solid #333); & > .inner { text-align: left; font-size: 12pt; line-height: 16pt; img { border: 1px dotted red; .transition(all .9s ease-in-out); } img:hover { .filter(grayscale(0.5) blur(10px)); } } } The code above is about 430 chars long while the compiled CSS is about 1654. Huh, Why the compiled CSS is so large? Well, because LESS Hat adds every necessary prefixes to the output plus it converts the linear gradients for older browsers therefore your site will look the same on more browsers. Don’t be scared but the non-minified output looks like this: If auto compile is on, every time you save your less files the compiler will create Css files that you can use in you client side code. It’s easy! You can work with LESS while you can use simple CSS in your client side code. Conclusion It’s about 10 minutes to install the environment, few more day until you get used to work with LESS but think on the time you’ll save with this tools. My work hours related to Css decreased about 60-70%. That’s a lot of time. The combination of LESS and LESS Hat is super effective, give it a try! I’m dedicated to LESS but feel free to play with both of Sass and LESS, for some people Sass just feel better. If you have any question or suggestion please leave a comment below.