Geek Culture
Published in

Geek Culture

CSS Preprocessors; Unveiling a Mystery

The breadth of topics to learn about in the realm of software engineering and development is so wide, that it can sometimes feel like a sea without end. So every week I try and find a topic I’m not quite familiar with and create an island of knowledge in this large ocean of possibility.

This week, I’ll be taking a closer look at the world of CSS; specifically CSS preprocessors. What they are exactly, and a couple use cases for this miraculous technology.

A preprocessor is essentially a framework for CSS that allows you to write more flexible, logical, and powerful code. CSS, like Javascript, is one of the immutable backbones of the internet as we know it. It comes baked into every browser and website that we interact with, and without it, any web application would be largely crippled, or at the very least, quite ugly. Unfortunately, CSS was created in 1996, and lacks that teaspoon of syntactic sugar that makes most modern programming languages so clean and easy to work with.

(As an aside, while we’re talking about things that everyone in the SE world should know; “syntactic sugar” is just a fancy way to say that something is allowing you to write or read code more easily and fluently. Tasty)

Much like the frameworks that use the transpilers that I talked about last week, CSS preprocessors make sleek, syntactically sweet code, that is ultimately compiled into vanilla CSS that a site’s HTML can reference on the browser.

There are a few different popular preprocessors out there, but the two most popular are Sass and Less. I’ll be talking about a few of the key features of Less today, almost exclusively because I like the name more. That being said, if you prefer the sound of Sass, here’s a link to their equally powerful documentation.

To start off all you need to do is type:

npm install -g less

From there, all of Less’s features will be functional, as long as you use the correct syntax in your stylesheets.

One of the most used features of Less is the ability to create CSS variables. Which is to say, you can save a certain CSS attribute in a named variable, and then reuse that variable across all your style sheets. What does that look like? Here’s an image from Less’s own documentation.

So handy!

At this point you might be asking yourself “But Gabe! If it takes me just as long to type the name of the CSS variable as it would to type the CSS attribute itself, why go through all the trouble in the first place?!” A fine point, noble reader. Let’s have a thought experiment.

Imagine for a moment, you have a client who has a deep adoration for the color magenta. They demand that every asset and element on the site you are building for them be bathed in majestic magentine hues. Now imagine that client gets a new lease on life, leaves the heady world of tech entrepreneurship, and makes a farm in India somewhere. The board members take over, and they hate the color magenta. With a passion fueled by the fact that it reminds them of the capricious old founder whose only true passion it seemed, was a world mired in miserly magenta. And so they demand the sight be remade in their image. Twenty different shades of beige.

Fifteen years ago, it would have been a nightmare to search through your sheaves of CSS stylesheets and painstakingly root out any trace of magenta from the newly bebeiged site. If you were using Less on the other hand, it would taken just a few key strokes to change the color variables you had set, to the more muted tones that your new bosses had proscribed.

An ever more powerful variation of the CSS variable is what the folks at less call a mixin. Using a mixin, you can take a whole set of CSS attributes that apply to a given class and pass them, en masse, to an entirely different selector. For example, if you’ve just made a delightful bouquet of CSS that compiles to a particularly cute card, you can then reuse all that meticulously crafted styling with another component, by simply invoking the selector you used for the first class. The one syntactical flourish is that you use a Javascript-eque pair of parentheses after the class that you are invoking.

Par example:

.new-class-styling{
.old-class-styling()
}

And, voila, the new class will inherit all the sweet stylings that you’d baked up for the last one.

Another neat trick that Less employs is nesting. There are no flashy functional features here, rather this facet is more about readability. Whereas with vanilla CSS, different classes of the same type of HTML element need to be targeted individually, in less you can nest the selectors for those subsets of element classes within the larger element selector itself. Here’s an example

p{
color: red;
.big-p-elements {
width: 500px;
}}

As you can see, if you can keep all the styling for every possible iteration of a <p> tag in one place, the code becomes much easier to read and comprehend.

And that’s all I’ve got my little exploration into Less. If you are interested in a more granular breakdown of how it all works, feel free to check out the Less documentation, and stay tuned until next week when I get into another little piece of the software engineering landscape that everyone should be familiar with.

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

GoLang helper module for fast development of CLI tools

Generate random test data at run time in JMeter

Success and error callbacks with C++ Lambdas

More than a Flutter Web App, is a full Flutter WebSite!

I want to talk about value, but I have to write my OKRs

Tips on How to Talk to App Developers

Getting to know the .NET framework

How I Switched from PHP to JS, Learned a Ton and Built Startups with Ex-Googlers & Scientist from…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gabriel Chazanov

Gabriel Chazanov

He/Him; Full Stack software developer who’s always striving to learn

More from Medium

ELI5: Positioning in CSS

What is CSS positioning and how is it used?

Centering vertically and horizontally with CSS

How does the browser interpret global CSS values?

CSS Layouts & floats