We're going to cover the basics of Sass, and then we'll create a project from scratch and deploy it, and I'll show you how you can easily include sass in your workflow.

And I want to give a big thanks to Bo and free code camp dot org's for publishing this video free code camp is an awesome resource.

And on behalf of the community, thank you for all that you do.

So before we get into this video, I'd like to quickly let you know who I am.

I'm a husband, a father and a programmer.

I've got over two decades of I t experience.

I'm a full stack developer.

I recently decided to create a YouTube channel, and initially I just wanted to help people.

But after my first couple of videos, I realized that it's actually helping me to become a better programmer.

I do research for every video, and a lot of times I come across things that I didn't know or a better way of doing things.

So I'm learning and teaching at the same time.

So when win, my channel is new, but I upload new videos every week had greatly appreciate it.

If you check out my channel and subscribe and that's enough of this, let's get into the video.

So we're gonna go over the basics of sass and set up our environment, and then we'll go through a project from beginning to end using SAS.

There's time stamps in the description if you'd like to skip through certain parts.

So what is SAS?

It's a CSS extension language and gives your CSS superpowers.

Once you see how easy it is to write and how logical and organized it can be, you'll never write Plane CSS again.

You'll see what I mean.

In a minute.

Let's look at what you need to write CSS.

First, you'll need a code editor, and I recommend V s code because it's open source and has great extensions and awesome community support.

Now your browser can't read SAS, so it has to be compiled into plain CSS.

But don't let that scare you.

It's easy.

There's several ways that we could go about this.

We could use no j s to run a compiler that will watch our SAS files and compiled them automatically for us.

But we could use Gope to do the same thing or we could use an extension in V s code.

And for this video, that's what we're going to do.

We're going to use live SAS compiler.

Another extension that we're going to use is live server.

If you're unfamiliar with V s code and how to set it up for Web development, I do have a video on that.

I'll have a link in the description below.

All right, I'm gonna quickly walk you through installing the live SAS extension so N V s code will go to extensions and we will search for live sass.

And there you'll see live SAS compiler.

Go ahead and click on that and then click install.

And after that's installed, we're going to look at some settings.

So let's go to our settings, and then we'll search for sass and then click on Life's Ass compiler there and then you'll see in the format settings.

We're gonna want to change the save location.

Now these settings are a personal preference.

By default, it will compile your CSS and put it into the same directory.

And I prefer for the compiled file to go into my distribution folder.

It's a little click on edit in settings, Jason.

And then here we're going to add some settings.

So these are your options.

So the default is at the top here, format is expanded, so there's no compression going on.

The extension name is dot CSS and then the safe path is no.

So that means it's going to go into the same directory as your SAS files.

So you could also change the formats who compressed if you want, and it will go ahead and compress.

And men, if I your CSS all in one shot and then you could change the extension name to dot men dot CSS and then you see what they're where we can put it into our distribution folder.

So I'm actually gonna do just a combination of the two for this video.

We're gonna keep the format at expanded and the extension as Nazi SS, and we're just gonna change the safe path.

Thio slash dest slash CSS and then we'll save that and we're good to go.

All right, now that we have all of that set up, let's create a standard folder structure here.

So I have a new project folder that I've created and opened it in V s code.

And let's go and create a folder here called Dist.

And then within our dissed folder will create in html file index dot html.

We'll use Emmett Will use exclamation enter, get a template here.

And we'll just name this says tutorial that will add a link here to our CSS.

So currently, we don't have one, but we will be adding it noticed the extension here is CSS not sass or S C.

S s.

So this CSS file is what's going to be compiled eventually once we've created our SAS files.

Now, before we create our SAS files, it's important to understand that there are two syntax is supported by SAS.

So there's the S C.

S s syntax and it uses the file extension s C S s.

And this stands for sassy.

CSS is basically a super set of CSS, which means essentially that all valid CSS is valid.

SCS ESAs Well, I'll show you that in a minute.

But because of this similarity, it's the easiest syntax to get used to and the most popular and the other syntax is the indented syntax And this was the original sin tax Versace.

And it uses the file extension.

That s a s s.

The indented syntax supports all of the same features as S CSS, but it uses indentation instead of curly braces and semi colons.

There are a few other minor differences, but we're not going to be using S a s s in this video, so we're not gonna go over those, All right, so we'll be using the S C.

S s syntax.

And so let's go ahead and create that structure.

So be sure you're in the root of your project.

And Gwen, create another folder here.

We're gonna name this S C s s.

And then within here, we're going to create a main dot F C.

S s right.

Now that we have that file open, we've got our extension installed.

So now you should see this.

Watch SAS at the bottom.

So go ahead and click on that and you're going to see an output here.

We'll see here that it's watching for our SAS files now, and it is compiling and generating them automatically.

And now it's watching for us to save the file again.

And when we save it, it's gonna automatically re compile and create that CSS file every single time that we saved the document.

And so we didn't add this CSS folder here, but now we have a folder in dist.

And so that extension created the folder and created our CSS file.

And of course, we don't have anything in our SAS file and so I don't expect to have anything in our CSS file either.

So remember we said that any valid CSS is also valid sas So let me show you what I mean by that store here in our SAS file, we can ad let's just do something generic here will say body fat ground and we'll set it to blue and I'll hit save and it automatically compiled or CSS for us.

So now if we go to the CSS file, we'll see body background blue just the same as we see it here So we can write plane CSS in our SAS file and it will work just fine.

So I also have a live server installed, so I'm gonna go ahead and hit that Go live and here you see, we have a blue website So an important note here is that we should never modify the CSS file on Lee modify the S CSS file every time the compiler runs is going to overwrite the CSS file.

So the first SAS feature that we're going to look at is variables.

Now, you might say CSS has variables to, and that's true.

CSS does have variables now, but SAS has had variables long before CSS.

Currently CSS variables compatibility across browsers is about 90%.

So that's pretty good.

And I don't see any reason not to use the SS variables.

But when you use SAS variables, they don't compile into CSS variables they compiled to the actual value.

So let me show you what I mean.

There.

So in normal CSS we could add variables like this.

So now we could set our background here using a CSS variable just like that.

So now if I save this, you see that our CSS file is pretty much identical to the S CSS file and if we switch over to our website, we now have a great background.

So now let me show you the difference between this and the SAS variables.

So with sass we can get rid of the route and instead of the dashes will add a dollar sign.

So the dollar sign indicates that it is a variable.

So instead of calling bar, we will just input the variable.

And I'll say this will switch over to our website and it's still great.

And let's look at our CSS now.

We don't have any variables defined.

It puts the actual value there.

So using SAS variables has 100% compatibility across browsers.

All right, next, let's talk about maps, So if you're familiar with JavaScript, you could compare maps to a raise.

Maps are lists of key value pairs, so I'll create one here so we'll define a variable and we'll name it Font waits and then tow to define a map.

We start with parentheses, so answer a key.

So we'll say regular will be the key, and then the value will be 400 will enter another one.

We separate these by commas, so we'll say medium.

We'll be 500 then bold will be 700.

And it's probably not the best example, but you can create a map of colors or different things, so that we have something to really add.

This, too.

Let's put some HTML mark up in here so we'll add a Div with class of Maine and then we will put a paragraph and we'll just put some warm in here.

50.

All right, it's now on the body.

We could apply, uh, fart.

Wait globally.

If we wanted to get a value out of the map, will use map, get it right and so is looking for the map.

And that would be fun waits.

And then the key would be, let's say, gold.

So this may seem like a bit much, but if we have our font waits defined throughout our CSS in many different areas and for some reason we want to change the way that the normal medium or bold font looks, let's say we want bold to actually be 900 instead of 700.

I could change in this one spot instead of searching through all of my CSS and changing it on each individual line.

Now, before I save this, let me pull up the website now and our text.

We forgot a text color.

Let's apply our color and we'll set that to text color.

But now we see that everything is in bold.

So this looks at our map and we tell it which key to look for.

It finds the key and then it extracts the value and it puts the value here a spot.

Wait, we go to see SS will see that our font wait to set the 700.

All right.

Next let's talk about nesting.

So nesting might be one of the best features of sass.

But depending on how big your project is, be careful with too much nesting.

Using classes that can be reused instead of nest after nest is much better.

But to demonstrate nesting, we will look at our paragraph here, so we have ah Dee of the class of Maine in a paragraph.

So let's look at the main Dev.

First, let's say that we want to center it and handsome margin on the side.

So also set the with here, too.

80% and we'll set margin top and bottom to zero left and right to auto and this is just plain CSS.

So if we go here, we'll see.

Now it's centered and we've got some margin on sides.

All right.

So now if we wanted to style or paragraph, normally we would have to do main and then paragraph and do it like this, or we could just do paragraph, and that would globally change all of the paragraphs.

But we don't want to do that with sass.

We can nest.

So within Maine, we could just do this.

And let's say we just want to put that fun.

Wait on, Leon, This paragraph.

We'll move it down here and I'll save that switch and we'll see Same thing.

Nothing has changed.

If we go to our CSS, you'll see that it has written it as proper CSS so that the browser can parse it.

Now, if you want to do this properly, um, let's add a class here to the paragraph.

We'll set it to Mein Herr Graff.

And then So instead of targeting the tag directly, we could do main here a graph.

I say that now it compiles properly into CSS.

But with sass, we have some shortcuts.

So instead of typing main again, we could take this part out and we can use an AM present.

So am Priz n equals the parents.

All right, so we save that and go to our CSS.

Now it's not quite right, cause its main underscore paragraph on its own, not within the main parent.

So to fix that, we actually have to use something called interpolation.

What that means is we don't want just dot main paragraph.

We want everything before it s so we have toe wrap the AM present in hashtag curly braces.

So now what we could do is at a hover on the paragraph and so we won't add that on the paragraph, not main.