3.3 Day 3: Nested Properties

Welcome to day three. Now CSS has a few properties that belong in namespaces. Basically these are larger groups of properties that share a similar parent. So let's see how CSS can help you work easier with these. To understand nested properties, let's start with a very simple example. So, if we look at the body selector here, we have three elements that start with font dash. We have the family. We have the font size, and we have the font weight. Now, what we can do here, instead of these three, we can be a bit more elegant, let's say. We can do fonts and then we can open some curly brackets and we can say something like this, family. And we can get this value here. And then we can do size, 1.125em. And we can do weight, 400. Then we can delete the rest. So instead of those three, we can actually group them in a single name space, like font. And this will compile just like the other one. It's gonna generate the same CSS. As you can see here, family, size, weight. Now, of course there are other properties for font. For example, if we do font dash, Atom here very conveniently shows us all the properties that we can use. For example, style, variance, stretch, kerning, and so on. So any one of these will work just fine. Now, this also works for other properties that share a common name. For example, margin. You can have margin left, right, top, bottom. Padding. Same deal. You can also have background. Backgrounds image, background color, background repeat, background size. So, there are a lot of them you can use. But, you have to be careful though of non-existing property names. So for example here, if I were to put blah and set that to 100 pixels, SaaS will actually compile this to font blah, 100 pixels, even though this property does not exist. So you have to be careful not to include properties that do not exist. Now, on this particular font property, I should mention that there is a shorthand that looks something like this. Font, 400, so we start with the weight, 1.125em/1.5. So font size slash line height, and then the font family. Now this does, exactly the same thing that this does. Only, it's a shorthand notation. Now you'll get shorthand notations for pretty much all the properties, so for example, margin, If you have different margins on all four sides, you can easily do that as a list here. This works just fine. So, if you have a short hand, you're probably better off using that one instead of this bigger notation. So, let's actually see some other examples here. And just scroll down, let's go ahead and find one. For example, border here. Yeah, I can do border and I can do the width, 0 1 pixels. I can do the style, solid, and I can do the color like that. And I can delete these two. Or you know, I can go here to padding, and instead of 3M0, I can do something like top 3m, right 0, bottom 3m, and left 0. Compiles to this adding top, right, bottom, left. So it lists all the properties that we listed right here. And the list of examples can go on and on. Now, using this method, might be overkill. It might generate even more code than usual. But I think it's better for beginners that don't really understand the shorthand notations and it can help make the SaaS code a bit easier to read. And that's it for nested properties. Now for the exercise, you have an SCSS file and your assignment is to use nested properties wherever you see fit. And good luck. And that's how SaaS can help you work easier with nested properties. Day four is about variables, another great features of SaaS and in fact of CSS preprocessors in general. So I'll see you there.