CSS Preprocessing

Our aim is to provide marketing insights to help inform your marketing initiatives. If you’d like our marketing experts to help accelerate your business’s growth, let’s talk!

Author: | Digital Marketing Experts

For the purposes of this short article we will focus on the two most popular CSS preprocessing languages: SASS and LESS.

If you’re a Web developer who does a lot of work with CSS and has yet to integrate CSS preprocessing into your workflow then the word of the day is either SASS or LESS (I use both depending on the project). If you’re generally resistant to stepping outside of your comfort zone, especially if that zone is working just fine for you, I can relate. I had been reading about CSS preprocessing for a couple of years before I decided to jump into it. Actually, it would be more accurate to say I was sort-of pulled into it by a coworker. But I’m thankful for it. I promise that once you start using it you’ll never go back.

The main reason for my initial resistance in using a CSS preprocessor is that I prefer simplicity over complexity. I had my workflow. I used HTML, JavaScript and lots and lots of CSS and it worked just fine for me. I figured if it wasn’t broken – I wasn’t going to try and fix it. But, as I found out pretty quickly, using a CSS preprocessor isn’t very complex and the learning curve is not steep. In fact, all valid CSS is valid SASS or LESS as the preprocessed syntax compiles to CSS so you can utilize as much (or as little) of the additional functionality CSS preprocessing offers when starting out.

Why should I use a CSS preprocessor?

    CSS preprocessing allows you to:
    • Nest your CSS instead of repeating your selectors when having to target child elements.
    • Use variables instead of repeating identical values.
    • Extend classes (apply the styles of a given class to other elements).
    • Use Mixins (Mixins are reusable groups of code).

FEATURES OVERVIEW

All code samples use SCSS syntax.

Nesting

Nesting selectors means you only have to declare each selector once.

SASS

ul.nav { position: absolute; bottom: 5px; right: 0; li { display: inline-block; margin: 0 20px; a { padding: 5px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; text-transform: uppercase; text-decoration: none; color: #ff6600; &:hover { text-decoration: underline; } } } }

Which would compile to something like:

CSS

ul.nav { position: absolute; bottom: 5px; right: 0; } ul.nav li { display: inline-block; margin: 0 20px; } ul.nav li a { padding: 5px 10px; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; text-transform: uppercase; text-decoration: none; color: #ff6600; } ul.nav li a:hover { text-decoration: underline; }

Variables

Assigning values to variables allows you declare them once. In the event that a client wants to change the value of one of the variables (like a color) you only need to change it in one place.

SASS

$blue: #99ccff; $primary: $blue; a { color: $primary; }

Which would compile to:

CSS

a { color: #99ccff; }

Extending Classes

Allows you to style an element and apply that style wherever you want.

SASS

.button { display: inline-block; padding: 5px 20px; background: $blue; color: $white; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: bold; text-transform: uppercase; } // apply .button styles to a form submit button input[type=submit] { @extend .button; } // apply .button styles to a cta anchor element a.cta { @extend .button; }

Mixins

Allows you to make a group of declarations (with arguments if needed) to be used wherever you want.

SASS

// declare mixin @mixin wmw($width) { width: $width; max-width: $width; } // apply mixin .sidebar-right { @include: wmw(34%); }

Which would compile to something like:

CSS

.sidebar-right { width: 34%; max-width: 34%; }

Lastly, installing, configuring and automatically compiling your code is simple. If you haven't yet experimented with this technology, I would encourage you to take it for a spin soon. I can guarantee you'll be thankful you did.

Any developer comments or clarifications would be welcome below.

Digital Marketing Experts

This was written by one of Straight North’s digital marketing experts. Our team stays up to date on the latest digital marketing trends and best practices to inform our audience and create strategies that deliver results for our clients.

Ready to Hire Your Last Agency?