hey guys today we're gonna talk about SCSS also known as sassy CSS and how this works inside service portal SCSS is a server-side stassi language that produces valid CSS but does add some pretty powerful set of features including nesting variables mix-ins operators and functions but for today we're gonna primarily focus on variables and how we can use these inside of our widgets and themes so to get started let's talk about how CSS works inside service portal here on the slide we have a list of all of the areas where we can enter CSS that's going to be included onto the page starting first with the portal and the theme which is where we're able to add CSS variables and a quick note here please do not write your CSS rules inside of the variable fields as this does get duplicated onto the page for every place where the variables are being used so moving on we have bootstrap and the default styles which is being run through the sass processor which means any of the variables we define will take effect inside of those style sheets next we have CSS includes now note here that this is not being run through the sass processor which means we are not able to use any of our variables inside of the CSS includes on the theme and then lastly we have the page the widget and the instance which is the primary area where we're going to be using those variables all right here I put together a quick widget which will help demonstrate how variables can be used inside widgets in service portal so here we have h1 with hello world and I have this tied to a class where we're setting the color and if we take a quick look you'll see hello world in blue all right so now let's update this to use a sass variable so I've already gotten started here so first off let's take our sass variable uncomment it and we're gonna move it down to here this is the color orange and you'll notice here the default attribute that we're setting I highly encourage you guys to use the default attribute and what this means unless it has already been set earlier so if you remember the order in which CSS was loaded on our prior slide you'll notice that the first one was the portal and then the theme what this is saying is we're setting the sass title color variable to orange unless we had set it in the theme or unless it had been set in the portal record all right so now that we've set this let's take a look at what this looks like and now hello world is orange so now let's take a look at what happens when we set this variable on the theme record so I already have the sass variable in here and we're gonna change it to use the color green and you'll notice the color has changed so this is really great because this gives us the ability to allow the widget to set the default colors and state but we're able to override it from the theme record and now imagine a scenario where you built out a theme that was used by multiple portals where you know a particular widget was rendering in that color but then the perhaps the fourth or fifth portal wanted to deviate from the rest and be slightly different but still share that same theme so wouldn't it be great if that portal could override the defaults so let's see what happens here when we set the variable on the portal record and now as you can see hello world has turned red and again this is because we use the default attribute which is allowing the first one to set the variable to take precedence which in this case was the portal record now that's all that we have time for today in this video but perhaps we can cover some additional features of sass in our next series of videos but thank you guys so much for watching and if you have any questions feel free to post them in the comments below thanks and Happy service portaling