Nibble

Less, Sass, Coffeescript and typescript with Umbraco v7

From noticing a couple of questions on the our forums, it seems like plenty of folks don’t know how you would start with adding less/sass/coffeescript/typescript to your Umbraco project.

One of the easiest options is to use Optimus, it’s main feature is to do bundling and minifications. But besides that  Optimus also features a provider model for dynamic css and js languages.

Show me

When installing the Optimus core the final step of the installation will let you install additional providers for dynamic styleheet (less, sass) and script languages (coffeescript and typescript).

Screen Shot 2015-10-13 at 12.32.03

Depending on the ones you choose you’ll get an additional dynamic stylesheets/dynamic scripts tree in the settings section where you can start creating files of the installed providers.`

Screen Shot 2015-10-13 at 12.33.43

You can then start editing and saving your less/sass/coffescript/typescript file

Screen Shot 2015-10-13 at 12.36.18

These will then compile to css (in the case of less and sass) or js files (in the case of typescript and coffeescript).

That’s how easy it is!

Leave a Reply