Estimated reading time: 3 minutes, 53 seconds

Preprocessing has been around for more than 5 years now, and while it is not yet standard practice for all front end developers, we have seen a noticeable prominence in the last year or so, with most major web language editors supporting LESS and SASS.

If you are new to the concept of preprocessing, let me first take a moment to explain. To explain the function of preprocessing, I must start by defining the acronym: CSS.. CSS is the style sheet language used on websites and modern apps written in markup. It stands for Cascading Style Sheet, and it styles the elements written in markup. Putting it simply, it’s the aspect of code that controls the aesthetics of the design – colour, positioning, animation, typography and so on. Writing CSS is quite straight forward, and while CSS has its place from a functional point of view, it can be rather limited in comparison to the abilities of scripting languages like PHP and JavaScript. This is where CSS Preprocessors like LESS and SASS  (stylesheet languages)give you the upper hand. Preprocessors add a ton of dynamic power and functions to the standard CSS language.

These preprocessors can completely change the way a front end developer writes CSS. A preprocessor is an extension of CSS that transforms the basic language to something more powerful. Features such as mixins, nested rules, inline imports and variables can greatly increase the speed and ability at which the front end developers code. More can be learnt about what all these extra features are on the LESS or SASS website.

If you compare standard CSS and the Preprocessed CSS (LESS or SASS), they might look completely different, but in fact they are much more alike than you think. Some of the preprocessors use a completely different syntax to write the code, while others are more similar with added syntax for  additional features. For example, if you were to apply a border radius to an element in a preprocessor like SASS (the .scss extension), you would create a mixin with all the browser prefixes added; whenever you want to apply that border radius to the element, you would call the mixin with your value added to it, and the CSS would add all the browser prefixes without you needing to write it every time. So you would only need to write the big chunk of code once, write it as a mixin, and call it in your classes to have it applied.

 

scss-css

reference: http://sass-lang.com/guide

There has been much debate on whether front end developers should dive into preprocessors and use it as their main source of CSS code. The main benefits of using preprocessors include:

·         Speed of coding.

·         Ability to use Variables in CSS.

·         Ability to define functions (mixins) to make certain sections of code smaller and easier to write when used multiple times.

·         Ability to nest code for readability.

·         Ability to use built-in pre-sets such as lightening and darkening of colours.

·         Ability to use mathematical equations to determine your pixel, rem, percentage and em sizes.

While the pros are clear, there are a few drawbacks for using preprocessors, such as:

·         The unnecessary file size increase with CSS, and  browser prefixes being added in multiple locations.

·         File compilation takes extra time and effort.

·         Learning new syntax for the preprocessors.

Most of these concerns for using preprocessors are really nothing more than ‘fear of the unknown’. There are a multitude of quick and easy apps that compile LESS and SASS files to CSS in just a few seconds. A lot of the new editor software has built-in compilers for preprocessors. This makes it even easier, and using preprocessors such as SCSS from SASS eradicates the need to learn more syntax other than plain old CSS; in fact it would most likely begin to prepare you for CSS4, which will grace us with its presence in the very near future.

As a front end developer, you can only benefit from using preprocessors such as LESS and SASS. Feel free to check out these resources to learn more and start your journey into a whole new world of writing dynamic and functional CSS. In no time at all, you will wonder how you ever got by without it. There are fantastic libraries included with LESS and SASS (which are only some of the preprocessors available) , which can make the life of a front end developer much easier.

To avoid writing a user manual here, I have kept my description as rudimentary as possible. For a more in-depth explanation on mixins and variables, visit the homepages of these preprocessors:

http://lesscss.org/

http://sass-lang.com/

http://koala-app.com/