This course will be retired on March 24, 2020.
Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
Currently in Sass, all variables declared outside of a mixin or function will have a global scope and can be referenced in other imported Sass files.
You'll be working in Sassmeister for this course.
Like what you see and want to read more? Check out 'Sass in the Real World' for more on Advanced Sass!
-
0:00
[MUSIC]
-
0:04
When writing any CSS you wanna look for
-
0:07
common values like colors, fonts, font sizes for example.
-
0:12
With SaaS these common values can be extracted and
-
0:15
placed into associate variables.
-
0:18
Variables which then can be referenced later when needed.
-
0:21
>> In the SaaS basics course with Hampton the core concept of using SaaS for
-
0:26
variables was introduced.
-
0:29
>> Here we will explore other more advanced ways of using variables and
-
0:33
setting default values for library code.
-
0:36
Last, we will look at how scoping works with SaaS, currently and
-
0:41
how it'll work in the future.
-
0:43
In any programming language,
-
0:44
scoping should be considered when setting variables.
-
0:47
In SaaS all variables declared outside of a mixin or
-
0:50
function will have a global scope and can be referenced in other SaaS files.
-
0:54
But don't forget the flip side.
-
0:57
All variables, ak arguments, used within mixins or functions are 100% scoped.
-
1:03
So, as an example here I want to set up a global variable for text color.
-
1:09
So, let's send in the projects here.
-
1:13
Touch app.scss and then let's look at app.scss.
-
1:23
So to get things rolling I want to create [NOISE] text-color is blue.
-
1:31
And this is a global variable.
-
1:33
[NOISE] Now I want to create a selector for error.
-
1:38
[NOISE] But, for text-color, I want this to be red because it's an error.
-
1:45
Color, and then it's using text-color.
-
1:49
But then, when I have normal-text,
-
1:53
I want this to be color, text-color, as well.
-
1:59
So what I'm thinking here is that text-color is blue,.
-
2:02
And then within error text-color's gonna be red, but
-
2:05
then my normal text should always be blue right.
-
2:09
If I come over here, [NOISE] and
-
2:11
I run SaaS, two things interesting to notice here.
-
2:14
One, my error color is red and my normal text-color is red,
-
2:18
this is because on how global variables are currently working inside of SaaS.
-
2:24
So since there is a global variable here on line one, when I redefine that
-
2:30
global variable here on line four this actually bleeds out into the global space.
-
2:36
So then by virtue of basically the cascade on line nine here.
-
2:41
The value of text-color has been changed to red, and so
-
2:44
then the value applied to the line nine color attribute is going to be red.
-
2:50
But what SaaS is saying over here is that assigning the global
-
2:53
variable is a deprecated concept.
-
2:57
So in future versions of SaaS, in the upcoming 3.4 it, it's anticipated
-
3:02
that since this is a global variable of blue and then this is going to be
-
3:07
considered a scoped variable within the specification of the selector.
-
3:14
Okay, so then only this will be red and
-
3:15
then this would be outcome blue and that's what we're expecting to happen.
-
3:19
So, the, another thing that we can do is if your intention really is for
-
3:23
this to become a global variable, and
-
3:25
than you want everything to come after it is to be red.
-
3:29
So then the flag you can actually put in there, which is new, is bang global.
-
3:35
So I hit Save for this and then I re-run my SaaS.
-
3:39
Now, I get to the exact same output, you know,
-
3:42
error color red, normal text-color red, but I don't get that deprecation warning.
-
3:48
So it's interesting to note here as well,
-
3:50
is that this is a deprecation space within SaaS 3.3.
-
3:55
so if you're using 3.2 and
-
3:56
you try to use the bang global flag, then you're gonna get an error.
-
4:00
Because 3.2 doesn't know what to do with that.
-
4:02
In 3.3, what you're gonna do is that you're gonna redefine that nested,
-
4:08
you know, quote unquote scoped variable and
-
4:11
you're gonna put it in to a global namespace.
-
4:14
If your intention is to, in the future you want it to be scoped,
-
4:19
you can leave it without the global, but you know, again that's actually kind of
-
4:24
a weird state because it's not going to be scoped to that selector.
-
4:28
And then you're gonna see all these warnings in your SaaS output.
You need to sign up for Treehouse in order to download course files.
Sign up