CSS is one of the key cornerstones of modern web design. It’s the reason you don’t see the web as a collection of boring text documents, instead allowing you to witness it in its full glory.
But while CSS might be the essential style sheet language, it does have its limits when used on its own.
For designers who need to get maximum functionality, CSS preprocessors are a must-have tool. CSS preprocessors, like the incredibly useful Sass (more on this below), help to create efficient and streamlined code that’s far simpler to maintain than standard code.
And if you’re a developer who’s planning on tackling more complex web projects, like building an entire website, having knowledge of CSS preprocessors is an essential requirement to make the process a whole lot easier.
What is CSS and what does CSS do?
Before we start exploring the hidden world of CSS preprocessors, it’s important to have a firm grasp of what CSS is and its fundamentals.
CSS stands for Cascading Style Sheets and is one of the original style sheet languages.
As for what CSS does; it allows a user to set the presentation and style of text documents written in a markup language like HTML. But CSS isn’t just compatible with HTML - it can also be used to present XHTML, plain XML, SVG, and even XUL.
What is CSS used for?
CSS is most commonly used to format how HTML elements should be displayed on web pages. There’s a classic metaphor used to help represent the relationship between CSS and HTML, and that’s the human body.
If HTML is the skeleton, the core content and structure of a webpage, then CSS is the skin – the visual component layered on top to make everything look nice.
Basically, without CSS, web browsers would just render HTML as plain text, which, let’s face it, isn’t very interesting to look at. Instead, CSS lets us see all the colours, fonts, layouts, and images that define the web as we know it. It’s incredibly useful and used by many online services, like the ever-popular WordPress.
All of this hints at the key principle surrounding the use of CSS: the separation of the page’s presentation from its actual content.
With the ability to apply a single style sheet to multiple pages and get consistent results, CSS enables a modular approach to a page’s individual visual elements, reducing complexity and saving time. This can greatly simplify design tasks that often involve several developers working in tandem across various web formats.
All this makes CSS an essential component of web design as a whole, but it also raises the question: if regular CSS is so great, why even use a CSS preprocessor?
What is a CSS preprocessor?
A CSS preprocessor is essentially a new scripting language that offers a variety of presentation features not typically available with standard CSS. After being written, a CSS preprocessor script can be compiled into your regular CSS code to render pages as normal.
A CSS preprocessor can’t fundamentally change the capabilities of CSS as a whole – the CSS preprocessor script has to be converted to CSS after all – but it does increase its overall functionality.
There are a number of key features that you’d typically expect to be present in a modern language that are missing from the venerable CSS. However, you can use a CSS preprocessor to implement these with minimal issues.
What is Sass?
Sass stands for the impressive-sounding Syntactically Awesome Style Sheets, and is written using Ruby. It’s hands down one of the most popular CSS preprocessors currently available.
The actual language used by Sass is called SassScript. There are technically two types of Sass syntaxes: Sass and SCSS, or Sassy CSS. The older Sass syntax uses the .sass file extension and is fairly distinct to CSS, focusing on concise code. The newer Sassy CSS is instead recognised by the .scss extension and is closer in format to CSS standard.
No matter which you choose, a SassScript is what developers write in a Sass or CSS preprocessor before compiling their code into CSS.
Sass vs CSS
Fortunately for CSS preprocessor users, a Sass preprocessor is totally backwards compatible with CSS, and all existing CSS files can easily be converted to Sass.
But where making use of a Sass preprocessor comes into its own is with the range of new features packed just beneath the hood.
These nifty new features that CSS is missing include the use of variables, which are sets of values that are simple to store and reuse. For example, Sass preprocessor variables can be used to set specific hexadecimal colours, avoiding the need to go back and find the right code every time you want to specify the colour of something.
Mixins is another Sass preprocessor feature that helps developers reuse blocks of code throughout a site – essentially creating a template for complex CSS coding. Other features of Sass that help to organise code include loops, nesting, inheritances, and partials. These all help to make your CSS code cleaner and more manageable, as well as reducing redundant code.
Sass for web designers
Taken as a complete package, it’s clear that Sass is very much focused on helping developers create more advanced CSS. And equally importantly, making that CSS simple to manage and maintain.
CSS, and Sass preprocessors in general, offer those quality of life improvements all developers and web designers dream of but never get to implement. The golden rule of using Sass should be seen in the context of ‘don’t repeat yourself’.
There’s a reason this is a long-established software engineering principle that is often advocated: make efficient code with minimal repetition and reuse code wherever possible.
So, if you’re struggling to decide on Sass vs CSS, the obvious answer is to choose both.
With all that being said, CSS preprocessors aren’t recommended for CSS beginners. It’s vitally important to understand the basics of the CSS language when starting out. While understanding CSS preprocessors makes advanced CSS coding easier to manage, using them also adds an additional step in the development process, potentially allowing more room for error.
Whether you’re just getting started with CSS, or building complex sites with a preprocessor like Sass, chances are you’ll need a reliable hosting platform to work from.