Tools for the Modern Front End Developer’s Workflow

Front end web developers hold a great responsibility to craft pixel-perfect layouts that run properly in all web browsers. Over time this has become easier with more advanced browsers and greater development tools.

While everyone knows about HTML and CSS, fewer people know about Sass and Haml. Front end development continues to advance with each passing year and it’s the role of the developer to stay on top of these changes.

If you’ve felt a little shaky with your front end skills or just want a refresher about some of the newer techniques, this guide is for you. I’ll cover a handful of popular tools and resources that every front end developer should use or at least know about.

CSS Preprocessors

Perhaps the most well-known CSS preprocessor is Sass, followed closely by Less. These are both libraries of code that parse custom CSS syntax to create more dynamic and modular code.

The term “Sass” refers to the technology and the syntax. Sass files can also be SCSS files. Less is the same thing just with different syntax.

CSS Preprocessors
Sass and Less are not languages per se, but more like extensions of CSS. Sass/Less code will compile to pure CSS.

The biggest difference between Sass and Less, aside from syntax, is how they operate. Sass runs on Ruby while Less runs on JavaScript (or with Node.js).

Please note that CSS preprocessing does require a little knowledge of Terminal/CLI commands. You don’t need to be an expert, but you will need to get comfortable working in the command line. For example, the quickest way to compile a Sass file is to run something like this in terminal:

sass input.scss output.css

But once you get some practice it becomes like second nature.

Here are some resources for learning more about CSS preprocessors:

http://sass-guidelin.es/
http://thesassway.com/beginner/
https://scotch.io/tutorials/getting-started-with-less/
http://www.cssauthor.com/less-tutorials/