SASS Stylesheets Guide

If you work in the digital industry, you have probably heard the term SASS being used by developers and designers.

So, what exactly is SASS, and why is everybody talking about it? Here is the one stop shop guide to SASS.

SASS stands for Syntactically Awesome Style Sheets (yes, really!) and is a CSS pre-processor. This means that it allows developers to write in SASS and then compile the code into regular CSS that can be used in the browser.

SASS is effectively a CSS extension that enables additional features that are not available in conventional CSS, such as nesting, variables and inline code imports, among other features.

At this point, it is worth pointing out that SASS has the benefits of efficiency and speed over conventional CSS. That said, SASS is built on CSS, so for people who are new to web development, to get the most out of SASS, they should get up to speed with CSS, before delving into SASS.

Variables

So just like in conventional programming, variables allow us to store information for use later on. In SASS, we could define a hexadecimal colour as a variable and then refer to it later in the code wherever the colour is required.

The key advantage is that if the colour hex was to change, we would only need to update the variable once. Whereas, using conventional CSS, the colour hex would have to be changed in every instance it is used.

Another area where SASS variables can come in handy, is for image paths. In this example, we can see the background image has an absolute URL, which can be changed at variable level, should the domain name ever change in the future.

Nesting

Using nesting, we can place element selectors inside one another, therefore mimicking the HTML markup. As a result, we can closely follow the hierarchy of the styles more easily, which allows us to work more efficiently.

The other advantage is that by nesting selectors within each other, it allows the parent selector would only need to be defined once, therefore saving us time. By ensuring elements are nested, we can also ensure the selectors are constructed correctly, by referring the the parent and grandparent elements.

Partials and Import

With SASS, we can create smaller files, called partials, that can be added into other SASS files. This allows styles to be split up into different files for a specific section of the application. Having this modular setup allows code to be easier to maintain and locate specific styles.

A partial can be defined by having a preceding underscore to the file name e.g. _navigation.scss.

The import function allows a partial to be included into the main stylesheet. With the import function, we can have multiple partials that can be combined together into one final stylesheet.

The main benefit of import is that we can have a modular setup for when we are coding, however this final output in the browser will be a single file, therefore reducing the number of HTTP requests and improving page performance.

When using the import function, the file extension and preceding underscore is not required.

Mixins

One advantage of pre-processors is that they allow us to simplify code that would otherwise get repeated. Mixins allow us to create mini functions for tasks that often involve a lot of duplication: the classic example being vendor prefixes.

Following the developer principles of DRY (Don’t Repeat Yourself) and KISS (Keep It Simple, Stupid), then we can use mixins to cut down any unnecessary duplication, and make our stylesheet much easier to maintain. In the vendor prefix example, it makes it easier for us to make our website compatible with various browsers.

Selector Inheritance

Another useful feature in SASS is the ability to allocate styles from one selector to another selector.

In the example, we can allocate the style of an H1 to the button. By doing this, we can make a change later on to the H1 style and it will also make the change to the button as well.

By using the @extend feature, we can cut down on styles that would otherwise get repeated and therefore keep our code more maintainable.

Conclusion

Having looked at SASS in detail, it is clear that there are many benefits to using SASS rather than conventional CSS. The key benefits of nesting, variables and partials all allow us to work more efficiently and make our code more maintainable. The ability to use mixins and inheritance allows us to reduce repetition and enables us to write code of a higher standard.

With such a well established following, the high standards and great levels of innovation will only increase over time. For us, this means we are likely to see new features appear over time. It is a great extension, which I would highly recommend and is a positive addition to anybody’s front-end workflow.

Useful Resources

SASS Documentation

Our Latest Posts

The Digital Den provides you with the latest tools, trends and tutorials that can be added to your digital toolkit. We discuss a range of digital topics such as web development, digital design and search engine optimisation.

August 2024
5 Mobile UX Principles for Responsive Websites
View Post
February 2024
How to Add an Instagram Feed to Your Website
View Post
November 2023
Improve the Page Speed of Your Website Checklist
View Post

Do You Prefer Shorthand Content? Try The Digital Den Scrapbook.

Feel free to check out The Digital Den Scrapbook for quick-fire posts about design, development and SEO.

We provide a range of digital offerings in the form of guided tutorials, tool reviews and the latest news updates.

View Blog