CSS preprocessor made simple: What and Why.

Let's start with CSS (Cascading Style Sheets)

CSS is what gives your website its visual aesthetics. It works hand in hand with HTML to be the core foundation of a website. While CSS is not needed.. it can make a big difference for an application.

What is a CSS preprocessor?
Is a tool or program that uses/has its own syntax, that later is compiled into standard CSS code.

Why use a CSS preprocessor?
As a project or application get bigger the CSS is going to become more difficult to maintain or alter. A CSS preprocessor allows for one to reduce the redundancy of code (code smell), make changes easier, and easier to read code.

CSS VS CSS preprocessor
Let’s use the CSS preprocessor SASS for these examples. Say you have a standard background color you would like to use. In CSS it might look something like this.

.wrapper {background-color: rgb(206, 206, 206);;}.App{background-color: rgb(206, 206, 206);}.container {background-color: rgb(206, 206, 206);text-align: center;margin: 1vh auto;}

Now instead of having to find all mentions of that color to change it. we can create a variable to hold that info. This is part of the magic of SASS

$bg-color: rgb(107, 107, 107);.wrapper {background-color: $bg-color;}.App{background-color:$bg-color;}.container {background-color: $body-bg-color;text-align: center;margin: 1vh auto;}

I am currently adding SASS to a project and will be writing a blog on how to add SASS to an exacting application.

For more information on SASS please visit here.

More to come soon!
❤️Till then❤️
Cheers~

Marie

--

--

--

Full-stack software developer and mother of one. Ready to make a difference... one line of code at a time!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Replicating Bitbucket Pipelines on your laptop for local debugging

Tips for working with software teams

Anthos: The multi-cloud platform by Google

Apache Flink Getting Started — Stream Processing

Getting Started with the Raspberry Pi

SQL vs NoSQL What’s the Difference ?

Helm and Charts in Kubernetes.

Does MVC still matter and should you use it?

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
Marie Hughes

Marie Hughes

Full-stack software developer and mother of one. Ready to make a difference... one line of code at a time!

More from Medium

CSS Flexbox

How does the browser interpret global CSS values?

Creating A Grid Display With CSS