INTRO TO SASS (syntactically awesome style sheets)
This blog is intended to upgrade your CSS skills, and to introduce some awesome styling advantages you’ll get when switching from CSS to SASS in your projects. I’ve made a small project and will demonstrate some really powerful SASS features like Variables, Nesting, and Mixins.
For installing SASS, follow the command-line instructions posted on their website: https://sass-lang.com/install. For this demo, I will be using VS Code and the Live Sass Compiler extension.
Before getting into some cool techniques that are simple and easy to use, I will briefly explain how and what SASS exactly is (besides being an awesome tool and styling sheet). First things first, SASS is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). Web browsers cannot read the SCSS scripting language, therefore, SCSS will compile your code and create readable CSS that the browser can read. SASS lets you use features that don’t exist yet in traditional CSS yet like variables, nesting, and mixins to name a few.
To begin, I have created a simple index.html file, as well as a style.scss file. This is where I will demonstrate some awesome features that come with SASS. As mentioned earlier, when our SCSS files compile, it will interpret our code into readable CSS for our browser. Therefore, when we run our style.scss file, SASS will create for us a traditional style.css file and write the CSS code for us. Feel free to copy from my example below! I have also linked our new stlye.css file that was created by SASS to our index.html file in the <head/> tag.
SASS VARIABLES:
let’s say in our HTML we wanted to change the color of both of our buttons. Traditionally we might target each button individually and do something like this:
However, across a much larger application, of course, imagine how challenging it would be if we wanted to change all instances where my background color was lightcoral? SASS solves this problem with a very powerful feature using variables. To define a variable in SASS, we use the $ symbol. let’s go back to our code and add a variable called PrimaryBtn to our sass file, and give it a value of lightcoral. We declare this globally so that all code blocks have access to it. Now, where we define the color for both of our buttons earlier, we can instead give it the value of our PrimaryBtn variable.
Look how much easier SASS makes it for redefining our styles. Now, if I suddenly wanted to change the color across my application, I would just need to make that change once in my variable declaration, and SASS would change all instances where PrimaryBtn is the color value. This is a small example of what SASS variables allow us to do. It is arguably one of SASS’s most powerful features! Imagine the complexity and creativity that this can be used for. Pretty cool!
SASS NESTING:
Let’s move on to another really awesome feature that SASS provides us called Nesting. When writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy between parent elements and children elements. However, CSS doesn’t support this hierarchy. SASS has a feature called Nesting which will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. I’ve added some additional styling to our <header/> tag and will demonstrate how you can target nested HTML elements withing the same SCSS code block. In addition, I will also explain how to add some more advanced styling to our button, like hover, for example, to our nested code block.
For the button that we added styling to earlier, we can now just define its style within its parent element. In addition, Nesting also makes it easier to add more advanced styling, such as a hover effect, to our button. The way we do this is to simply add “&:hover” below our buttons styling. I gave it the value of a new SASS variable that I defined called HoverColor.
If you take a look at our style.css file after this code is compiled, we see that our Live Sass Compiler will write this nested code just like we would traditionally in CSS, for our browser. In addition, our Live SASS Compiler has also added for us all the vendor prefix for the different browsers that don’t necessarily support flex-box. And this also applies to all other CSS properties that you’d add that aren’t supported in other browsers.
The Nesting feature that SASS provides us makes it so much easier for developers to keep track of all their styles. Any style that I’ve added within my header is now organized in one place. By using this, I am now confident that I won’t find other header styling tags below this code block. My styles are now concisely organized and nested accordingly.
SASS MIXINS:
One last feature that I will demonstrate in this Intro to SASS is the use of Mixins. SASS mixins let you make groups of CSS declarations that give you the ability to reuse throughout your site. Just like we defined our variables earlier, let’s create a mixin called flexCenter. We define our mixin using the ‘@’ symbol. I will remove the display and align styles that we defined in our <header/> tag earlier, and add them to our mixin instead. Then, I will add that mixin as a style back to our <header/> tag. This makes our display and aligns styles completely reusable now and I can add them elsewhere in my code accordingly.
Our Mixin called flexCenter is defined at the top of the file under our variables and reused in our header and contact class. Take a look at our site now!
One last note on mixins. You can even pass in values to make your mixin more flexible. Here’s an example using flex-direction. Let’s say I wanted to use my mixin, however, I wanted my header to be flex-direction: row, while I wanted my contact to be flex-direction: column. Mixins allow you to pass arguments. Therefore, I will add an argument to my mixin called $direction. Keep in mind this must be a variable. In my mixin body, I will add flex-direction: $direction. The value that I pass into my mixin when I call it will be the direction that my style listens to! Check it out.
You can see that in my header, I pass my mixin a value of ‘column’, but in my contact class, I pass in the value of ‘row.’ Here is the final result!
In this Intro to SASS, I covered some really powerful features that SASS provides to make styling websites much more organized and dynamic for the developer. It allows you to use variables, nested rules, mixins, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
Check out the full documentation below:
