You might think you’re getting a handle of learning frontend web development, and then next minute your colleague is casually going around talking about Sassy CSS. What is going on?!
It’s time to enter the world of CSS preprocessors, an invaluable part of any coder’s toolbox. But what exactly are they, and how do they actually make developers’ lives much easier? Learn all about them in this guide.
In this article we’ll start with a brief introduction to the language of CSS itself and what coding problems it actually solves. Next, we’ll look at CSS preprocessors, which extend the functionality of regular CSS. We’ll cover some of their main features, as well as positives and negatives of using them.
You can click a heading to jump right to that section below if you like.
- What is CSS?
- What problem does CSS solve?
- What are CSS preprocessors?
- CSS preprocessor features
- Pros and cons of using a CSS preprocessor
- Popular CSS preprocessors
- Final thoughts
1. What is CSS?
CSS stands for cascading style sheets. It’s the language for describing how a document written in a markup language such as HTML should look. Together with JavaScript and HTML, CSS builds the basis for web pages online.
With CSS you can describe the presentation of a web page via things like color, layout, and font. Adjusting to different types of devices and screen sizes is also handled by CSS. By separating CSS from HTML, it makes it easier to maintain a website. This way, you can share a style sheet across pages, or adjust it to different environments.
For a deep dive into CSS itself, you can head over to our full beginner’s guide.
2. What problem does CSS solve?
The major problem CSS solves is removing the format of the web page from the HTML itself. As we’ve covered in our beginner’s guide to HTML, it’s used for describing the structure of a website. Consider it as the beams of a house. Things like whether something is a heading, a list, a link, etc.
Over time, tags like <font> and color attributes got added to HTML. This became a nightmare for web developers. Without the ability to share styles, the style and layout needs to be written from scratch for each page. This time adds up, making the development process longer and more expensive.
CSS extracts the style out of the HTML into its own .css file. With an external style sheet, you can change the look of an entire website with just one file. CSS saves a lot of work this way, by making the style more reusable.
3. What are CSS preprocessors?
You may be thinking, okay, CSS sounds great, what could go wrong? There are still some downsides. As the web gets more advanced, writing regular vanilla (plain) CSS can get lengthy and repetitive.
CSS preprocessors extend the functionality of regular CSS. They add more logical syntax and tools like variables, if/else statements, and loops. This makes the CSS more efficient and concise, powerful and dynamic. Using a CSS preprocessor, a developer is able to write out more complex style and layout. The source code can be shorter and more readable.
To accomplish this goal, CSS preprocessors add syntax that is not within CSS itself. More advanced CSS is written that extends the basic functionalities. This advanced code is later compiled as normal CSS code that the browser can understand.
4. CSS preprocessor features
Okay, so what are all these cool features?! Let’s dive into the main features most CSS preprocessors add to vanilla CSS.
Variables
Just like in regular programming languages, CSS preprocessors give you the opportunity to add variables to your styles. This is helpful for styles you plan to reuse often.
$hoverColor: #33FF9B;
button {
background-color: $hoverColor;
}
In this example you see we’ve defined a hoverColor variable. Rather than looking up and defining the hex code every time you need it in your app, you can now just refer to $hoverColor instead using a variable.
If/Else statements
If/else statements allow us to apply some CSS only if a condition is true.
@if width(body) > 500px {
margin-top: 100px;
} else {
margin-top: 10px;
}
In this example we’re checking if the width of the body of the page is greater than 500 pixels. If it is, we’re setting the margin at the top to 100px. Otherwise we set the margin at the top to 10px.
Loops
Loops are useful when you have a collection of items (arrays or objects) that you want to increment over. As an example, let’s say we have an object of our different social media icons and the colors they should be. We want to look through and apply the relevant color and link to each button.
$social: (
'facebook': #4267B2,
'twitter': #1D9BF0 ,
'linkedin': #0072b1,
'instagram': #8a3ab9,
);
Now we’ll look through our $social object and assign each color and link to our buttons.
@each $name, $color in $social {
// selector based on href name
[href*='#{$name}'] {
background: $color;
// apply the link for the relevant image file
&::before {
content: url(https://www.careerfoundry.com/images/#{$name}.png);
}
}
}
Pretty cool, eh? These are just some examples of what you can do with CSS preprocessors. There are many more popular features like mixins, nesting, extends, color functions, etc. Depending on which preprocessor you use, of course!
5. Pros and cons of using a CSS preprocessor
Pros of using CSS preprocessors
- It makes your code more maintainable. For example, you can declare your brand colors in one place:
$primaryColor,$secondaryColor, etc. If your brand colors change later, you only have to update them in one place now. - Write DRY CSS, a.k.a. Don’t Repeat Yourself. CSS preprocessors make it easy to reuse styles, meaning you don’t have to write the same code over and over.
- They make your code more organized. Rather than sprawling sheets of styles, you can group your code and be more specific. Less repetition is shorter and more readable.
- It’s more efficient. That repetition takes time! Especially updating it later when the design changes!
Cons of using CSS preprocessors
- Debugging is harder. Since you’re reusing code, it could take longer to find where the problem is.
- Additional complication time. Since the browser doesn’t read this more advanced version of CSS, it needs to compile it into regular CSS before showing the style.
- Can produce very large CSS files. The source files will be more concise, but the generated CSS files could be huge. This could cause additional time for a request to complete.
6. Popular CSS preprocessors
There are three main CSS preprocessors at the time of writing this article: SASS, LESS, and Stylus. Most CSS preprocessors have similar features. Yet each one has its own unique way of completing the same task.
All three preprocessors allow you to create variables, media queries, mixins, nesting, loops, conditionals, and import. There are some differences when it comes to advanced usage, which we’ll go into now.
SASS
Sass stands for Syntactically Awesome Style Sheets. It has two options for syntax, Sass and SCSS. As of version 3, SCSS is the official syntax. SCSS (Sassy CSS…yes, really) is closer to regular CSS, so it makes migrating easier. The biggest difference between the two is the use of parentheses and semicolons.
Sass is compatible with all versions of CSS. It has a large community, has been around over 15 years and also has more features than the other CSS preprocessors. For example: @extend, @media, and @content. Sass is available under the MIT license and is open source. There’s also some helpful frameworks around for Sass like Compass and Bourbon.
LESS
Less is short for Leaner Style Sheets. It’s designed to be as close to regular CSS as possible, as the syntax is the same. Less runs in the browser within Node JavaScript. This means with Less, compilation takes place live via less.js in your browser.
With fast, modern browsers this is fine, but it’s something to be aware of for older browsers. Less.js also caches the CSS in the browser, so it’s not regenerated for the user each time.
Stylus
Stylus is built on Node.js. Unlike Sass and Less, which are more opinionated about syntax, Stylus lets you omit braces, semicolons, and colons if you want.
Another cool thing is that Stylus has a property lookup feature. If you want to set property X relative to property Y’s value, you can do that.
Due to its flexibility, Stylus can be more concise, but it really depends on your preferred syntax.
6. Final thoughts
CSS preprocessors are quite common. You’re likely to find them as part of the web development process at many companies. Which one is best often depends on the project, preference of the developers, and time the project was created. It’s definitely worth playing around with one in your next project and seeing what they can do!