Let me guess, you are a web developer, right? If not, you’re probably a curious mind. Whichever one you are, it’s always great to have some more knowledge, right?
So, SCSS and SASS, what does these two jazzy-sounding and highly confusing ‘words’ mean, and how are they so important to the world of web development? Let’s take a bite into what they are.
SCSS (Sass) and SASS (Syntactically Awesome Style Sheets) are two CSS preprocessors that add extra functionality to CSS, making it easier and more efficient to write and maintain. Although they share the same name, they have different syntaxes and a number of key differences.
SCSS, which stands for “Sassy CSS”, was introduced in 2007 and was created as a superset of CSS. This means that any valid CSS code is also valid SCSS code. SCSS uses curly braces and semicolons, just like CSS, making it more familiar and easier for CSS developers to pick up. The .scss file extension is used to refer to SCSS code.
The following is a simple SCSS code to change the background colour of a webpage to blue:
$main-color: blue;
body {
background-color: $main-color;
}SASS, on the other hand, was introduced in 2006 and uses indentation (instead of curly braces and semicolons) to separate code blocks. This makes it more concise, but can also make it more difficult to read for developers who are used to CSS or SCSS syntax. The .sass file extension is used to refer to SASS code.
Below is an example of a SASS code used yo change the background colour of a webpage to blue:
$main-color: blue
body
background-color: $main-color
One of the biggest benefits of using SCSS or SASS is the ability to use variables. Variables allow web developers to store and reuse values throughout your stylesheet, making it easier to maintain and make global changes to your styles. For example, you can store your brand colours in variables and use them throughout your stylesheet, this in turn, makes it easier to update your colour scheme in the future. In the following example, a variable $main-color is declared and used in different parts of the stylesheet.
$main-color: blue;
body {
background-color: $main-color;
}
.header {
color: $main-color;
}
.footer {
border-color: $main-color;
}SCSS and SASS also offer the ability to use Mixins. With Mixins, you can reuse a set of styles across multiple elements. This can be particularly useful for repetitive styles, such as vendor-prefixes for CSS properties. Mixins can also take arguments, making them even more flexible. In the following example, a mixin is created to handle vendor prefixes for the border-radius property:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}Another advantage of SCSS and SASS is the ability to use functions. Functions allow you to perform calculations or manipulate values, making it possible to generate styles dynamically. For example, you could create a function that calculates the font size based on the viewport width. In the following example, a function is created to calculate the width of a container based on the viewport width:
@function container-width($viewport-width) {
@return $viewport-width * 0.9;
}Overall, SCSS and SASS are two useful tools in the hands of developers, and the choice of which one to use boils down to personal choices of developer, or the requirements of the project. While some might choose to be a specialist, and master one over the other, some might choose to be a generalist and have both stacks in their arsenal.
Why not try both, and see which one is easier for you?