HTML, CSS, and JavaScript have been the staple technologies for bringing the web to users for years. Over time, updates to all 3 technologies have greatly enhanced their functionality. Given these enhancements, there are areas that could use additional functionality to meet the needs of complex UI/UX situations. CSS in particular, can feel limited in these complex situations. Fortunately, CSS preprocessors exist to help add some much needed functionality to CSS.
What are CSS Preprocessors?
A CSS Preprocessor is a scripting language that extends CSS and gets compiled into regular CSS syntax. Now what does that mean? That simply translates to a preprocessor being a language that allows you to write styles that have additional functionality which then gets turned into the CSS that browsers already understand.
Most popular
Preprocessors have been around for a few years now. Some of the most popular preprocessors are Sass, LESS, and Stylus. Each has its own unique syntax difference but overall they provide many of the same benefits once compiled into CSS.
Advantages
Using Sass, LESS, and Stylus as a baseline, below are some of the benefits to using a CSS preprocessor:
- Nested syntax - The nested syntax allows a cleaner method of targeting DOM elements. It prevents the need to rewrite selectors multiple times.
- Ability to define variables - Variables allow storing of any value and can later be reused. Similar to nesting, this allows the developer to specify certain values in one location and if they need changed, must only be updated once. Global changes to styles helps save time and promote concepts such as theming.
- Ability to easily reuse and modularize styles
- Mixins - Mixins allow the grouping of multiple code lines together that can then be reused throughout a stylesheet. They can even be configured with variables to become very powerful.
- Ability to extend selectors - A selector can inherit the rules of an existing selector.
- Mathematical functions - Preprocessing allows the use of math functions to perform calculations. This becomes very useful when combined with variables.
- Import files - Styles can be broken into multiple files and imported into a single file. This allows for styles to be broken into their own files but not requiring the end users to have to download multiple files.
Libraries:
As you can see, there are many benefits to using a preprocessor. But there is more! As mentioned earlier, there are several very popular preprocessors. These preprocessors leveraging their own reusability capability have allowed for the creation of several extremely useful libraries to be created to give even more out the box functionality. Below are just a few of the many libraries that exist for the most popular preprocessors:
Outie:
CSS Preprocessors can be viewed as an extension to CSS. They provide many benefits such as saving time, making styles more reuseable, and In exchange for these benefits, some additional steps are added to your current workflow and stylesheet creation. A good way to get started with any of the popular CSS Preprocessors is to try them out. Codepen.io is a free HTML, CSS, and JavaScript sandbox that features libraries.
