Syntax, Nesting, & Selectors

[00:00:00]
>> Mike North: Let's jump in and talk about SASS origins. This is the gentleman who first invented SASS, Hampton, who is also responsible for a library called HAML. And if you had been playing with Ruby on Rails in 2007, 2008 sometime around there, this was a very popular way of expressing HTML or HTML-ish stuff using whitespace to indent things instead of a hierarchy of nested XML tags.

[00:00:35]
So later on, we had two other people join the SASS core team, Chris Eppstein, who works at LinkedIn, and Natalie, who works at Google. By and large, Chris and Natalie are responsible for maintaining the code base today. They're the more active contributors, but the three of them put together are responsible for sort of charting the course forward and deciding that whether things should be brought into the SASS library or should remain as extensions that you can layer on in separate libraries.

[00:01:08]
Now, HAML, being something that's sort of at the root of SASS, it's sort of part of the genealogy of SaaS, we end up with an HAML-like syntax in addition to something that looks a little bit more like CSS. So on the right, we have a file called styles.sass, and on the left, we have the same file with a scss extension.

[00:01:35]
And while both of these do work, and will continue to work, the SCSS file format which stands for Sassy CSS, that is, by and large, way more popular, and it is increasing in popularity just because it's very easy to start with the CSS file, change the name of the extension to that file name, and you can start to layer on new, more powerful concepts from there on out.

[00:02:09]
Right. So for today, whenever we talk about a SASS file, we're not talking about something that has the extension sass. We're just going to be working with this. We're gonna pretend that the other doesn't exist. It works. It will continue to work. There's a strong commitment from the core team, that they're not going to break those older indent-based file formats.

[00:02:32]
But just to make things a little bit more approachable for those that are not used to tabs and spaces having meaning in their source code, we'll stick with this today. And just so we can get some terminology straight, let's sort of dissect what we're looking at here. So first, we've got something called a selector.

[00:02:56]
This tells us where this CSS rule we have on the screen applies. This is gonna apply to the foo class. So if we had a div with the class foo, this rule would apply to that. We've got something called the declaration block, and this is where style declarations live.

[00:03:16]
So each one of these lines in the declaration block is called a style declaration, and they are comprised of a property and a value. So these are the kinds of names I'm gonna be calling things today, just so that we have our terminology straight. So let's jump in and look at an example.

[00:03:37]
And starting with vanilla CSS, let's start to one by one layer some concepts up until we get into something that looks a little bit more powerful. The first thing we're gonna deal with is something called nesting and scoping. And to aid in this discussion, let's use an example of a fixed-width sidebar to the left of some area where we've got some main content.

[00:04:03]
So this would be sort of the WordPress kind of layout. We could define the CSS for this layout as follows. This container div which wraps the main content, you can see that at maximum, it's gonna end up at 600 pixels wide. When it reaches that maximum width, it will sort of be centered on the page because we've got margin: auto.

[00:04:29]
Less than 600-pixel width, so when we start to look at a mobile layout, we'll take up the whole width of the screen. That's where that width: 100% will help us. And we give it a background color. We add a 10-pixel padding to both the sidebar and the main element, and then the main element, we're going to give a left margin sufficient to make room for the sidebar, that's where that 220 pixel comes from.

[00:04:58]
The minimum height of 100vh, that's what makes it so that if we have a very small amount of content in our main content area, that div doesn't end up being very small, shrinking to fit our content. It will be the full height of the page at minimum, and will grow if our content needs it to grow.

[00:05:18]
Finally, we give ourselves a little border so that we can tell the difference between the main nav and the sidebar, and then the sidebar is gonna always be 200 pixels wide and it will float left. So this is a lot of text for defining these styles. We could do something similar with SASS, like this.

[00:05:39]
So one of the things that SASS gives us is the ability to nest style rules inside the declaration block of a parent rule. So in this case, you can see that we've scoped some rules for the sidebar for the div we're calling main. We've scoped them so that they only apply within the container.

[00:06:01]
This is the equivalent SASS to the CSS that I showed you on the previous page. The same rules apply as they do in CSS, where rules that are defined later take precedence on rules that are defined earlier, and specificity still applies exactly the same as it would, because ultimately, this ends up becoming CSS in its process from top to bottom.

[00:06:27]
So, we've already consolidated things quite a bit here, and one of the advantages that we've been able to get is that, there's a little typo here. I've made a mistake, having to type container over and over and over again. This is a very real problem that pops up in apps a lot.

[00:06:50]
And you don't end up really into this as much in SASS, because typically, you're defining things once. And so a large portion of your style would not work if you misspelled something because it would be like the parent element is just not applying at all because nothing matches it or any child selectors.

[00:07:09]
Whereas here, it would be really easy to kind of, maybe on some browsers, you get a default padding of 10 pixels, and so it looked okay there, but other browsers, you may not be so lucky. So, what we've described here is something called descendant style rules. And this simply means that we can define styles on a left-area div that is inside container.

[00:07:40]
It is a child or a grandchild, it is somewhere inside this other parent div. And you can see here, this rule we've defined will apply to both of the colorized left-areas you see in the HTML to the left. In CSS ,we also have little operators, like the direct descendant selector, which would basically constrain this to, say, only left-area divs that are immediate children, of the container div she get the style.

[00:08:14]
The style rule should only apply to those. And you can see here that we're able to just put those. You can actually make it either part of the child selector, as we've written here on the slide, or you could put it in the parent selector and just have .left-area inside the declaration block.

[00:08:32]
The downside there would be that everything inside that declaration block would be taken as a direct descendant selector. So you don't see that as often because it sort of eliminates some flexibility for what you can specify within that scope.
>> Mike North: Let's look an enhancement we can make to this layout, where adding the right-nav class to the div would move the sidebar from the left over to the right.

[00:09:03]
So we could make use of what's called the parent selector in this case, which is the and sign, and that refers to the name of whatever selector defines the declaration block you're currently in is associated with. So in this case, it's going to be .container. So the style on the left, the SASS on the left will be compiled into the CSS you see on the right.

[00:09:30]
And this is really useful in terms of defining what we're gonna look at when we start talking about these would be modifiers. Right. This is a great example of a modifier, by the way. What we're saying, it's sort of a flag that we can turn on for this particular chunk of HTML, and it will alter either the way it looks or the way it behaves.

[00:09:59]
>> Mike North: So, we can also use the parent selector, and this is less commonly seen. We can also use the parent selector to scope certain rules to an outer class. In this case, we've got theme-dark, and then the ampersand sign following that, the and sign following that. On the right, you can see what that let's us do is express a rule in terms of a class being applied outside of the parent scope.

[00:10:28]
Right? This is great for theming, and this is, in my opinion, an underutilized use of the parent selector here.
>> Mike North: So with that, we're gonna jump in and start writing some code that makes use of the parent selector and nesting inside scopes.
>> Audience 1: Mike, just a quick question from online.

[00:10:51]
>> Mike North: Yes.
>> Audience 1: So for SCSS, can you drop the braces? I think there's some confusion between the difference between SCSS and CSS, just to be clear.
>> Mike North: So in SCSS, if you were to drop the braces, I don't believe it would compile.
>> Audience 1: Okay, thank you.
>> Mike North: And the name of the file, the extension of the file is important.

[00:11:21]
So you'll wanna make sure that for this class, and just generally in the world, you're gonna use that SCSS file extension, and that you do include braces, and that way it will look like a superset of CSS, which, in fact, it is.