Introduction
Sass (or SCSS) is an extremely powerful design tool for developers. It takes care of all the heavy lifting of regular old CSS, and so much more... A lot of new developers are afraid of it for some reason (I was too!), but you'll fall in love so fast! In fact, by the end of this blog, I'd be willing to bet your whole design game will forever change. Buckle up, this is going to be fun. 😉
Installation
This walkthrough will require VsCode. I'm sure there are other IDEs you can use, but we're going to be using a couple specific extensions.
Step 1:
Install "Live Server" by Ritwick Day
Step 2:
Install "Live Sass Compiler" by Ritwick Day
Wow, that was easy! Let's get to the fun part.
Setup
At this point, you'll want to start a new, empty project. Include an index.html file. Inside of index.html, type ! and press enter to create a very basic HTML boilerplate.
Or just copy this one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass Sandbox</title>
<!-- CSS -->
<link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
<div id="root">
<header>
<h1>Sass Sandbox</h1>
</header>
<div class="container">
<h1>Welcome to the...pratice box...thing....</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor consequuntur fugit magni esse, exercitationem nisi eius ipsa commodi! Quod saepe dignissimos vel accusamus ducimus iste nam quam officia, similique neque?</p>
<button>Here is button #1</button>
<div>
<button>Curvball, but here's a button in a DIV</button>
</div>
</div>
</div>
</body>
</html>
You'll notice the ./styles/styles.css is included, and it doesn't end in .scss. This is because browsers can't read .scss files. We will be using Live Sass Compiler to compile our styles.scss file into styles.css. You'll find out how we do this next.
In the same directory, create a folder called styles. Inside of styles, place a new file called styles.scss.
Done? Great! Let's learn how Sass works!
Working with Sass
For the sake of keeping things consistent and less confusing, we're going to work off the boilerplate I included above.
Inside of your styles.scss, we can start including some normal CSS, like so:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Looks normal, right?
Well, let's activate our Live Sass Compiler. At the bottom of your VsCode, you should see a button that says "Watch Sass".
Click this, and watch the magic happen! Now you'll have a generated styles.css along with styles.css.map. The latter isn't important, so let's open styles.css.
NOTE: If you don't have autosave enabled on your VsCode, you will need to manually save your changes by pressing CTRL + S
Notice how it's slightly different looking?
body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This is only the beginning. 😉 Sass takes care of not only setting properties, but it sets your styles up to work across all browsers. Regular CSS can do this, but it takes a significant amount of effort to apply by hand.
Let's take a look at a more complex compile. Place this in your Sass file:
header {
display: flex;
box-shadow: 0 0 50px -20px black;
justify-content: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: rgb(178, 178, 209);
}
Now, get ready. This is what all of those properties look like when compiled for all browsers:
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: 0 0 50px -20px black;
box-shadow: 0 0 50px -20px black;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: #b2b2d1;
}
Wonderful! Sass is already starting to set off the dopamine in your brain, isn't it? Surprise, it gets better. Now we're going to learn about using variables.
Sass Variables
Wouldn't it be amazing if we could use variables in Sass like we do in, say, JavaScript? Wait... we can! Imagine that you have a specific color that you use throughout a really huge application. Among the CSS properties it's used in, you can probably imagine how much of a pain it would be to go and change every single one when you change your color scheme.
Enter in Sass variables. Here is how we would set one at the top of our Sass file:
$myNewSassColor: lightblue;
Now we can change the background color in our header style:
header {
display: flex;
box-shadow: 0 0 50px -20px black;
justify-content: center;
align-items: center;
font-size: 3rem;
width: 100vw;
height: 200px;
background-color: $myNewSassColor;
}
This is a very simple, narrow case but I'm sure you can see the benefit at a much larger scale. Hypothetically speaking, if you end up with 100 elements with the same background-color, I'm sure you'd agree that changing a single variable VS changing 100 styles is preferred!
Now, let's talking about nesting.
Sass Nesting
If you've ever tried tackling a project using pure CSS, you know how crazy it can get. Addressing each sub-element can turn into a nightmare. At least far as I'm concerned, it's caused me to burn out very quickly after hours of design work.
Take a look at this raw CSS:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.container h1 {
font-size: 3em;
margin: 0;
}
.container p {
width: 50%;
}
.container button {
color: red;
}
☝️ This is what will be returned after this 👇 Sass compiles:
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
h1 {
font-size: 3em;
margin: 0;
}
p {
width: 50%;
}
button {
color: red;
}
}
This is Sass nesting! It's much cleaner, easier to read and easier to manage. Pseudo-selectors are handled differently as well, but still in a pleasing way:
h1 {
font-size: 3em;
margin: 0;
&:hover {
color: red;
}
}
Imports
Sass also allows us to import from other Sass files. These files start with an underscore. Let's assume you have a file named _anotherSassFile.scss.
You can write your styles in styles.scss still, but this allows us to separate by concern. We can build a Sass file for our navigation bar, one for our home page, one for a dashboard, etc. All you have to do in order to use the imports is placing @import './anotherSassFile.scss' at the top of styles.scss & you're good to go!
Sass Mixins
Mixins are similar to functions in JavaScript, and they allow us to condense repeated code into a single Mixin.
As a frontend developer, let's be honest -- You're using these properties A LOT! :
.someClass {
display: flex;
justify-content: center;
align-items: center;
}
Those three properties are damn near the bread and butter for a lot of our designs, but we have to repeat ourselves over and over. Let's make using them a little easier...
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
Our @mixin has a variable name of flexCenter. You can name it whatever you want. Whatever makes more sense to you. But now, look at how we can use it:
.someClass {
@include flexCenter();
}
From three lines down to one! Do you love Sass yet? No!? Still not convinced? Okay, fine. I get it. You're all about the fancy things in life. You don't like your cake without icing. Heard, then check this next part out:
@mixin Variables
You can make dynamic mixins. I'll just show this one to you:
@mixin flexCenter($direction) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction
}
.someClass {
@include flexCenter(column);
}
Would you just LOOK AT THAT? Sass allows us to set arguments, and they work! Enjoy that icing, buddy.
Conclusion
Sass is a very powerful tool capable of changing the way we design our web pages. From nesting to variables to mixins (basically functions), Sass completely changes the game. If you haven't found a reason to dive in yet, hopefully I've done a great job at convincing you today.
Happy Tuesday, everyone!
Top comments (1)
This is awesome thanks for this article 🙏