What Are Sass Stylesheets?
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.
$font-stack: Arial, sans-serif;
$primary-color: #09B8C8;body {
font: 100% $font-stack;
color: $primary-color;
}
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.
$image-path: "https://website-name.com/assets/images";body {
background: url(#{$image-path}/background-image.png) no-repeat 0 0;
}
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.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
}
}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.
// _navigation.scssnav { li {
display: block;
padding: 10px 15px;
}
}
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.
// main.scss@import 'navigation';h1 {
display: block;
padding: 10px 15px;
}
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.
@mixin prefix($property, $value){
-webkit-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}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.
// Include this in the SCSS file.arrow{
@include prefix(transform, rotate(30deg));
}// SASS would generate the following CSS in the browser.arrow{
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
Selector Inheritance
Another useful feature in SASS is the ability to allocate styles from one selector to another selector.
.font-h1{
font-size: 20px;
color: #FF0000;
}button{
padding: 10px 15px;
@extend .font-h1;
}
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.
