Welcome to Innominds Blog
Enjoy our insights and engage with us!

Quick Guide to CSS Preprocessors

By Cami Zimmer,

We are all aware that maintenance of Cascading Style Sheets (CSS) for larger projects or complex systems is a problem. CSS lags re-usability. New specs are being introduced. Developers are following different approaches for writing better CSS for their projects.

A few examples we have seen the last year include:

(1) Writing definitions in multiple files based on the modules and importing them into one main file.

This approach helps overcome the problems with components but does not help solve code repetitions and maintainability problems.

Ex: @import './common/grid/app-grid.less';

@import './less/variable.less':

@import './less/setup.less':

@import './less/reports.less':

(2) Early implementation of object-oriented CSS.

In this particular approach, we witnessed two or more classes that were applied to an element that increased re-usability but decreased the maintainability.

Ex: .parentheader, .subheader, {

padding:10px :

background-color:blue:

margin:10:

border : 1px solid black:

}

As web technologies grow, new specs are being introduced to html, as well as CSS. Many vendors are releasing the libraries with their own special prefixes by following basic rules. Due to usage of vendor-specific properties, the styles many times vary across multiple browsers.

Hence, we see the importance of combining multiple vendors to obtain the single result in all browsers.

What Are CSS Preprocessors?

CSS preprocessor is a scripting language that extends CSS with variables, operators, interpolations, functions, mixins and many other usable assets that are compiled into regular CSS syntax.

What Are the Features?

1.  Variables.  Variables allow you to store strings that can be reused many times. They form a reference in your style sheet to the specific string. We believe that while they may be called “variables”, it may make more sense to refer to them as “constants” because the value of variables namely is expected to be a constant value, one that doesn’t change over the course of style sheets. Variables are mainly used to store aspects, like width, colors, font and size.

/* main-header*/

@white: #FFFFFF

@header-background: #34B2E6

@header-color: @white

@notification-background: #fd6965

@header-height: 76px

2.  Nesting.  Bluntly speaking, we do not only like variables. However, we highly appreciate the use and existence of preprocessor nesting. We know that CSS lacks visual hierarchy while working with child selectors, and nesting provides what is needed - a visual hierarchy and increases the readability. Taking into account the DRY principle, (don’t repeat yourself) nesting is   highly advisable to be used with preprocessors. Although its main objective isn’t saving you time, nesting is used because it gives you a clean code. And as you know, code is often spoilt because developers add new rules when developing a CSS. Nesting makes sure your code is tidy and neat at all times.

            EX : ul {

                                    font-size: 12px;


                                    top: 13px;

                                    left: 5px;


                                    height: 150px;

                                    overflow-x: hiddent;

                                    li {

                                         a{


                                                color: black;

                                                input {


                                                            margin-top: 0px;

                                                }

                                    }

                                    }

                        }

3.  Mixins.  Mixins are often defined as being CSS declarations that have been added to reusable sets and often contain parameters. These sets can then be included in or mixed into other rules. Mixins are preferably used with large parts of vendor prefix styling and are reusable sets of CSS declarations that you can include or "mix in" to other rules. They are good for large  chunks of vendor prefix styling. In practice, a mixin is called from within a         CSS selector after, once the mixin is recognized, the styles that are  defined within the mixin will be applied to the selector.

            Ex :

                        body {


                                    color: #333;

                                    background-color: #fff;

                        }


                        @mixin .contrastAdjust {

                        }


                        .contrastAdjust p {

                                    color: #fff;

                        }

                        .sale {


                                    background-color: red;

                                    include: .contrastAdjust;

                        }


                        .help {

                             background-color: blue;

                                    include: .contrastAdjust;

                        }

4.  Extends.  Extends are useful for sharing a generic definition with selectors rather than copying it in. All extended selectors are grouped in compiled CSS and are chainable.

                        Ex :      .foo{

                                                Color: red;

                                    }

                                    .bar {


                                                &:extend(.foo);

                                    }

5.  Operations.  Operations are used to add, multiply, subtract and divide specific values and colors. LESS ad Sass can perform these mathematical commands, as well. We prefer Sass because it acts in a smarter way by excluding incompatible functionalities like % and px from the mathematical calculation. When confronted with these units, a syntax error is displayed.

                        Ex : .content {

                                    Height: calc(100% - 50px);

                                    Overflow:auto;

                                    }

6.  Functions.  Integrated programming functions form a vital part of several CSS Preprocessors. Functions that often occur are amongst others: math functions, unit conversion, string functions and list functions.

7.  
If/Else Statements.  Control directives and expressions help to build similar style definitions according to matched conditions or variables.

Best CSS Preprocessors

Why Use a CSS Preprocessor?

The well-known DRY principle (Don’t Repeat Yourself) isn’t really applicable to CSS. CSS preprocessors were developed to ease, fasten and clarify the CSS development, as well as ensure developers don’t have to rewrite the same CSS twice. A CSS preprocessor should be considered a layer in between the different style sheets that are managed and the CSS files that are served to the browser.

But Why, You Ask?

For starters, cleaner code with reusable pieces. Secondly, more flexibility to do things on fly.Thirdly, shareable snippets and libraries.And finally, opportunity to easily produce CSS that works across browsers.

Our Thoughts on the Best CSS Preprocessors

            Sass (Ruby)

            Scss (a syntax of Sass)

            Less (JavaScript)

            Stylus (JavaScript)

Our Gift to You – A Helpful List of CSS Preprocessors

  1. SASS http://sass-lang.com/documentation/file.SASS_REFERENCE.html
  2. LESS CSS http://lesscss.org/features
  3. Stylus http://stylus-lang.com
  4. CSS Crush http://the-echoplex.net/csscrush/#api
  5. Myth https://github.com/segmentio/myth/blob/master/Readme.md
  6. Rework https://github.com/reworkcss/rework#rework
  7. SWITCH CSS https://sourceforge.net/projects/switchcss
  8. CSS Preprocessor https://kornel.ski/css
  9. DT CSS https://code.google.com/archive/p/dtcss/
  10. Clay http://fvisser.nl/clay
  11. CSS PP
  12. CSS Cacheer
  13. Turbine
Cami Zimmer

Cami Zimmer

Head of Corporate Communications and North America Events

Subscribe to Email Updates

Authors

Show More

Recent Posts