Getting started with Sass
Sass is a CSS preprocessor / extension that stands for Syntactically Awesome StyleSheets. It’s simple to install, just type npm install -g sass in your command line, and now you can use .scss files in place of .css files. The nice thing about .scss files is that they are compatible with CSS, so you don’t have to change anything you may have in your existing files. Converting them to SCSS simply allows you to do more, which I will explain below.
Variables in Sass
If you’re using the same colors over and over again in your web design, which you probably should be so that it has a cohesive theme, you can set those colors, fonts, font weight, etc to a variable. You can name the variables something like primary-color and secondary-color or main-font or navbar-font you’re really only limited by your imagination and vocabulary. Then you can use the variables instead of having to memorize a hex code for a color, this is especially useful if you’re using gradients or designing a webpage with a style sheet file that is hundreds of lines long. In Sass this is accomplished by using the $ symbol as a prefix.
$background: #05b1a8;
$main-font: basic-sans, sans-serif;
$gradient: linear-gradient(45deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871).home_screen_h1 {
font-family: $main-font;
font-weight: 900;
font-size: 4rem;
background-image: $gradient;
background-size: 400%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: gradient-animation 10s infinite alternate;
}
It is possible to assign and use variables in CSS. The difference is, common practice with CSS variables would be to declare them in the root so that they can be used globally across the HTML document. An additional difference is that the variables are declared using double hyphen (- -) notation and then applied using var(--variable-name-here) within the selector of your choosing. Which isn’t overly complicated, but it is less simple than using the $ for both declaration and use.
:root {
--background: #05b1a8;
--main-font: basic-sans, sans-serif;
--gradient: linear-gradient(45deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871);}.home_screen_h1 {
font-family: var(--main-font);
font-weight: 900;
font-size: 4rem;
background-image: var(--gradient);
background-size: 400%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: gradient-animation 10s infinite alternate;
}
Nesting
Nesting can best be explained as assigning the children of a tag or class or id within the styling of that tag. If that sounds confusing, don’t worry there’s an example below that’ll make you say “Ohhhh that’s what he means.” This might be my favorite thing about using Sass. I tried doing this recently and didn’t realize I was using a .css file instead of a .scss, until I went to look at my webpage and the webpage was as confused as I was. Luckily all I had to do was change the file to .scss and I was good to go and so was my app.
CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}SCSS
Notice that the ul, li, and a tags are nested within the nav tag.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}Partials
Partials file are created using a leading underscore and let you to create files with snippets of css that you can use in other files. This allows you to make smaller, more manageable and more legible styling files. It also lets you use things like variables across multiple files.
Modules
Modules allow you to split up your styling into different files like I mentioned in partials. With modules you can import the styling from one of your style sheets to another the same way you use variables within a stylesheet. The other Sass file will be loaded as a module using the @use rule. Sass essentially uploads one big file to your server instead of making multiple http requests by importing files using regular css. This is perfect for buttons, pages, alerts, as long as they start with and underscore you can use them in another file.
CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
.inverse {
background-color: #333;
color: white;
}SCSS
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
Mixins
To create a mixin simply give it start with @mixin followed by whatever you want to name the mixin. Mixins let you create a CSS declaration that you can reuse later.
CSS
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
color: #fff;
}
.alert {
background: DarkRed;
box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
color: #fff;
}
.success {
background: DarkGreen;
box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
color: #fff;
}SCSS
In the example below there is the mixin named theme as well as the variable of $theme. So basically what is happening is there’s a mixin named theme that is used in the info, alert, and success class. The first class, info, uses the DarkGray color as its background, the box-shadow with a color of DarkGray with 25% opacity, and the color #fff. The alert and success class use the same theme mixin format with background, box-shadow, and color, but instead of DarkGray the colors are DarkRed and DarkGreen for the respective class.
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}Hopefully at this point you can see the usefulness of using Sass in your styling. It’s really intuitive and keeps your CSS dry which is always good when coding. It can easily be added to any application because it doesn’t stop any existing CSS from operating. Give it a try, it’s worth it I promise. As always if you have any questions or just want to link up, feel free to connect with me on LinkedIn.
