Sass @import and Variables

[00:00:00]
>> Mike North: So we were talking earlier about how in CSS we've got this import concept. So CSS allows us to define multiple style sheets, and from within a style sheet we can refer to another external CSS file and kind of bring it in, almost like dependency injection a little bit but it's a ultra primitive means of doing so.

[00:00:28]
The down side here is that this is a brand new request that we are sending out. So the user has to bear a cost of us separating our CSS out into separate files. Now, we could build, we could create like an elaborate build system that would resolve all of these Imports into a single CSS file, and in doing so, we would basically build a piece of what SASS is.

[00:00:55]
So we want to decouple these concepts, and this is sort of taking something that we've learned from the JavaScript world. That there's great value when we're dealing with a lot of complexity and a lot of different components. There's value in being able to break things out into individual little files, where each has a dedicated concern.

[00:01:17]
And particularly, when we're looking through our source code and we wanna see, what's the history of this file? It's really nice to be able to see that we've just been dealing with container and right nav, and this is sort of the file dedicated to the high level layout of this application we're building, not the components contained therein.

[00:01:36]
And to have that be sort of its own entity managing its own dedicated concern as a file. As a result, you can also use import in SASS, but it does something completely different. It does something more along the lines of what we would want. So let's imagine that we have a folder structure that looks like this.

[00:01:56]
So we've got four files in it. You'll see two of them have underscores at the beginning of their names. And two of them don't. So the things with underscores at the beginnings of their names, those are known in the SAS world as partials. Partials are designed to be imported into other SAS files, other scss files.

[00:02:20]
And they will not become their own CSS files ended up themselves. If we would appoint the sass compiler at this folder, we would end up with these two turning into files. Right, we have app.scss and other.scss but layout and variables will sort of They would not come along for the ride.

[00:02:41]
So this is what we get in terms of being able to break things up on our end as builders of style sheets and not have to pass that cost of that modularity onto our users and forcing them to go through seven different HTTP requests in order to resolve all of our styles.

[00:03:02]
And by the way, the result they will see on the screen is that you know potentially, they'll have one style sheet land and some rules be applied and another stuff sheet will land and end up with pretty drawing effect. And the eventual setting of your site, like the settling of all of your styles that may happen three seconds after the page load completes.

[00:03:26]
So any time you see some weird flashing going on where things load, and then shuffle around much later, this would amplify that effect in a very negative way. So in addition to being able to have partials and being able to just through file names control what will turn into an independent file versus what will remain kind of an internal concept, a module that we bring in.

[00:03:57]
We can point the sass compiler to other folders. So an example is if we brought in bootstrap for and we said, by the way you should also look in these places for other SASS files that you're gonna look into node modules, bootstraps slash SASS, or whatever it is.

[00:04:14]
You'd be able to import it just like this, and then import other partials and even other CSS files as well. You could bring in other from app if you wanted to. And then you would like discard the result of other. I wouldn't advise doing that but I am just saying import has, it's not limited to partials.

[00:04:36]
You can import any sass file, any scss file for that matter.
>> Mike North: So this is importing and it's done v f. It's called the import Declaration, anytime we have the at sign, we call that declaration. On top of this, let's layer another concept of variables. So, here's ab example of using sas variables.

[00:05:04]
And we can use them in a couple ways. Pu here, we have, let's call it a global variable declaration. And that means that any SAS file that has included this, right? It could be that that's a SAS file that's imported. The file inside which that lives. That would have access to that variable.

[00:05:25]
And oftentimes, what people do is they will create a file dedicated towards global variables and they will be free to kinda input that wherever its necessary. Yes?
>> Audience 1: Where do you personally, normally put your variables file?
>> Mike North: I would put that as a sibling to my app.css file.

[00:05:49]
As it's own partial, that is totally dedicated to variables.
>> Audience 1: Yeah, okay.
>> Mike North: Where it gets a little more complicated, is if you're building on top of a framework. Because in that case, there would be certain things that they're trying to customize, say in Bootstrap.
>> Audience 1: I don't use

[00:06:04]
>> Mike North: Right. What, maybe-
>> Audience 1: I see, yeah.
>> Mike North: People do.
>> Audience 1: Yeah.
>> Mike North: And then I would wanna break out things that are like bootstrap customizations from my own variables.
>> Audience 1: Right.
>> Mike North: And the reason there is that if I need to do an update in a library and there may be new variables that are introduced, I want to really keep track of what I'm bringing in versus what I'm defining out my own and also the ordering sometimes matters which we're gonna get into in a moment.

[00:06:38]
So variables always begin with a dollar sign. Right, and it looks just like our style declarations here, right? It's like a colon between a name and a value, variables always begin with a dollar sign. And then any valid CSS value can be used as a variable value including weird stuff like the value of box shadow, which is like Pixel values and colors and radiuses, and you can even have multiple shadows separated by commas.

[00:07:12]
You could use that as the variable value as well.
>> Mike North: This bang default, right, this is not the exclamation mark here does not mean not, how many negatives sees that. So, I assume that anyone who's looked with CSS has seen exclamation mark important before. This just fits in the same of like key words that we can use.

[00:07:43]
What we've done here is we've set error_color up as what's called a default variable. And that means that this value will only be used if error_color has not been defined elsewhere. So if we've already defined error_color earlier up in this file, this will not override that. This will not override that.

[00:08:03]
And oftentimes, you will see that bootstrap and material design frameworks and the like, they will define their variables in terms of these kinds of things. So that what you can do is like in our example on the previous screen where we can bring in bootstrap. So above the bootstrap import, you could set some variable values here.

[00:08:25]
And then when bootstrap kind of goes to reading it's sass and it's variables file, it will encounter things that will express these default variables. And by kind of defining something first before you bring bootstrap in it all, your custom value will be used in assembling bootstrap together, and this could be like Paddings or colors or fonts, anything that is parametrize in those frameworks.

[00:08:51]
So that's the purpose of using these default values.
>> Mike North: In here, we have what's called a local variable declaration. And if you are a JavaScript developer, this may be useful to think of this as something defined inside a closure in that if we had other things nested inside alert error, they would also have access to text color.

[00:09:22]
This is, in my opinion, an underutilized feature of SAS because what it lets us do is have easy to manage names. We don't have to name space everything globally and make it alert_error_default_text_color. We can just use short names that are meaningful because they're only pertinent in the context of the declaration block inside which they're defined.

[00:09:50]
And so you don't have to worry about like all of that stuff we go through to avoid collisions with other variables. So I really love using this kind of thing. And a sneak preview here, there's something else I'm using here. I'm using a SASS function at the bottom to darken a text color by 40%.

[00:10:11]
So SASS comes with a bunch on functions that let us manipulate strings and adjust colors to other colors and work with numbers and so on. We'll get into that later, but just want to let you know what's ahead. So in terms of variables, using simple arithmetic, it is totally fine.

[00:10:34]
So for example, if you have a variable that is like border width and then you want a double thickness border somewhere. Then you can express it as border dash width colon that variable *2 like for times two. You can do simple arithmetic just fine. And sass handles a lot of typical unit conversion, so if you need to convert from like not possible to convert like rams to pixels, you can't really do that just because you have to take font metrics into account.

[00:11:15]
But degrees to radians, you could do that pretty easily. You could convert percent to a decimal value, like 50% or .5. It's all regarded as the same thing. These are all what Sass would treat as numbers. It almost like boils everything bound to some base level where it normalizes all numbers.

[00:11:38]
And so you can inter-operate between them degrees like. And again, any CSS value is fine according a variable. So we have several different types of variables that we can use. Four that we're gonna go over now, and two I will leave until later because they're almost like data structures.

[00:11:57]
They're not just primitive types. So the first is different types of numbers, and so we've got points, percent, pixels, just numbers, right? We've got colors, which we can express in a couple of different ways. We can use hex values, RGB components, RGBA, or the reserved color names, the ridiculously long and sometimes esoteric list of built-in CSS colors.

[00:12:27]
>> Mike North: Strings are strings nothing too interesting there. Booleans are booleans. So the two we're gonna put off until later are the concept of lists and maps. And I will give you an example of what a list and map would be. A list would be like port radius. We have several space delimited values that all together they sort of, that can be a property value, right?

[00:12:55]
Border radius has one property value and its value is a list. Maps, we don't often see in regular CSS but if you have ever used the Sass feature where you can say heading: and open a new declaration block and say top:5px bottom:2px that key value relationship there is a map.

[00:13:22]
You have an ordered collection and a key value pair data structure. Almost like an array and an object in JavaScript.
>> Mike North: So one thing you'll need to know for the next exercise or it will be useful to know is a little bit about Sass comments work. So block style comments end up being preserved in the output CSS in line comments always get rid of.

[00:13:51]
The reason here is that in line comments are not part of the strict CSS spec. So the effect cannot be preserve. So it's not so much that it was designed this way, but if you haven't desire to make in line comments, know that there's just no way, other than like turning it into a block for example for it to be passed on to what the browser consumes.

[00:14:19]
So one of the things I love using comments for, especially as I build my CSS, is something called string interpolation. This is where we can take like a variable, or the output of a SASS function. And we can render it, we can place it into our CSS somewhere into our using this pound sign and braces.

[00:14:42]
So essentially, what we're saying is we're taking the color green. We're passing it into one of these built in color functions called hue. Which hue was the rotation around the color wheel that a particular color is so it has a value from zero through 360 for degree value.

[00:15:02]
So we are basically saying Hue is and then we want the angle for green and what we get in the outputs CSS is 120 degrees. If you're curious about like what is this thing returning, you can always use a comment and just interpolate the value right in the comment.

[00:15:21]
You can interpolate values in selector names or in property values or there are, I'm actually not aware of any limitations of where you can interpolate values. In some places, it would result in invalid CSS, and so that will throw things for a loop and you won't get anything out, but I would just say if it makes sense to you somewhere it probably does.