[MUSIC]

When writing any CSS you wanna look for

common values like colors, fonts, font sizes for example.

With SaaS these common values can be extracted and

placed into associate variables.

Variables which then can be referenced later when needed.

>> In the SaaS basics course with Hampton the core concept of using SaaS for

variables was introduced.

>> Here we will explore other more advanced ways of using variables and

setting default values for library code.

Last, we will look at how scoping works with SaaS, currently and

how it'll work in the future.

In any programming language,

scoping should be considered when setting variables.

In SaaS all variables declared outside of a mixin or

function will have a global scope and can be referenced in other SaaS files.

But don't forget the flip side.

All variables, ak arguments, used within mixins or functions are 100% scoped.

So, as an example here I want to set up a global variable for text color.

So, let's send in the projects here.

Touch app.scss and then let's look at app.scss.

So to get things rolling I want to create [NOISE] text-color is blue.

And this is a global variable.

[NOISE] Now I want to create a selector for error.

[NOISE] But, for text-color, I want this to be red because it's an error.

Color, and then it's using text-color.

But then, when I have normal-text,

I want this to be color, text-color, as well.

So what I'm thinking here is that text-color is blue,.

And then within error text-color's gonna be red, but

then my normal text should always be blue right.

If I come over here, [NOISE] and

I run SaaS, two things interesting to notice here.

One, my error color is red and my normal text-color is red,

this is because on how global variables are currently working inside of SaaS.

So since there is a global variable here on line one, when I redefine that

global variable here on line four this actually bleeds out into the global space.

So then by virtue of basically the cascade on line nine here.

The value of text-color has been changed to red, and so

then the value applied to the line nine color attribute is going to be red.

But what SaaS is saying over here is that assigning the global

variable is a deprecated concept.

So in future versions of SaaS, in the upcoming 3.4 it, it's anticipated

that since this is a global variable of blue and then this is going to be

considered a scoped variable within the specification of the selector.

Okay, so then only this will be red and

then this would be outcome blue and that's what we're expecting to happen.

So, the, another thing that we can do is if your intention really is for

this to become a global variable, and

than you want everything to come after it is to be red.

So then the flag you can actually put in there, which is new, is bang global.

So I hit Save for this and then I re-run my SaaS.

Now, I get to the exact same output, you know,

error color red, normal text-color red, but I don't get that deprecation warning.

So it's interesting to note here as well,

is that this is a deprecation space within SaaS 3.3.

so if you're using 3.2 and

you try to use the bang global flag, then you're gonna get an error.

Because 3.2 doesn't know what to do with that.

In 3.3, what you're gonna do is that you're gonna redefine that nested,

you know, quote unquote scoped variable and

you're gonna put it in to a global namespace.

If your intention is to, in the future you want it to be scoped,

you can leave it without the global, but you know, again that's actually kind of

a weird state because it's not going to be scoped to that selector.

And then you're gonna see all these warnings in your SaaS output.