Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:28Length:1.7 hours
Speedy workflows with atom.io
  • Overview
  • Transcript

6.8 LESS and CoffeeScript Compilation

LESS and CoffeeScript are usually compiled with front-end tools like Gulp and Grunt. Sometimes all we want is a quick ‘save to compile’ command. This lesson covers two packages that allow for no-hassle compilation of LESS and CoffeeScript.

Related Links

6.8 LESS and CoffeeScript Compilation

Compiling less in coffee script is easy with front end tools such as Grunt and Gulp. Sometimes we just want a simple save and compile. In this lesson, we'll go over two packages that make this easy. And now we have link project opened up called less coffee. To install the package we'll do it through settings so we'll Cmd+, go to the Packages tab. And we're going to search for Less. In out search results, we see a packaged called Less Autocompile. We'll install that and learn more while we download. Less Autocomplete Package will compile our Less when we save. To specify how to compile we need to provide a comment in the first line of code. This comment will let us change where the file gets outputted to and whether we want to compress it. Open up a command line instance and we'll create a folder called less. Now we're also create one called CSS. CD into less, now create a file called style.less. We'll CD out and CD into CSS, then create style.css. And technically when we compile, this file will be generated out for us. Now we'll close out of the terminal. Open up style.less and we'll start to write some less. Create a variable and call black, and we'll assign a black color. Now we'll create a class called black and set its color to the black variable. When we save, nothing compiles, and this is because we haven't provided that comment yet. At the top we'll do a double slash for the comments. Then we'll provide the out parameter. We want the out parameter to say ../CSS/style.CSS and we'll provide compression. Now when we save we get the messages down at the bottom. So we hit Ctrl+P and style.CSS. Our less been compiled to CSS and compressed as well. Our less will move the variables from this file and add them to their own. We'll create a new file and we'll save it as variables.less. From here we'll add the black variable. Now inside style.less we'll get rid of that and we'll save. In the error, it will let us know that black was not defined. So we'll import variables.less. Now we'll save and we don't get any errors. In our style.css is still the same. To prove that this actually changed we'll add a new variable. Now in style.less we'll add a class for red. We'll go back to our style.css and our red class appears. Compiling from less to CSS and [INAUDIBLE] is very simple. By installing the package and providing parameters in the form of this comment, we can easily specify where CSS gets compiled to as well as we want it compressed. This seems like it's as easy as it gets, but for a compiling copy script, it's actually even easier. We'll install the coffee script package so we'll pull up the setting, within packages, we'll search for coffee scripts. And we'll scroll to the bottom and we'll select coffee compiler. We'll go and create a folder for coffee scripts and we'll create our coffee script file. Now we'll write some test coffee script all this does is create a function that returns hello with a name that's passed through. And all we have to do to compile is save. And now that we've saved, we've compiled to JavaScript. So we can hit Ctrl+P, and type script.js. And that pulls up our compiled coffee script. If we open up the coffee folder, we see the script.coffee as well as the script.js. Even though compiling less and coffee script is easy with gulp and grunt it's nice sometimes to be able to save and compile. Fortunately these two packages provide us with this quick fix.

Back to the top