Zero to Production Node.js on Amazon Web Services SASS Code Demo

Transcript from the "SASS Code Demo" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kevin Whinnery: The other bit that I was gonna show is just a few minor features of SCSS. So here is the very simple CSS that we have for the application. Most of the styling for the TodoMVC application is provided by some external style sheets that we don't necessarily care about.

[00:00:26] Those are actually located here in the base in index style sheets, all of the different implementations of TodoMVC. Of which there are many, by the way, I don't know if I called that out yesterday. But if you're interested in seeing the same application implemented across multiple frameworks, you can head out to TodoMVC.com and kind of compare and contrast different approaches to this.

[00:00:53] So this is the place where I got the code, if you haven't navigated out there already. So in our case, we actually don't have a lot of custom CSS yet. But some of the features that Sass provides you that you wouldn't necessarily have otherwise are the ability to create variables and mix-ins and to nest your CSS, which is actually one of the things that I find most useful.

[00:01:26] So for our server, let's go ahead and run our server. Come on now, expected character. Yeah, I didn't back out the JavaScript changes, so let's do that.
>> Kevin Whinnery: Okay, super.
>> Kevin Whinnery: All right, so here's our to do application. As you can see, I was spamming in quite a few entries into the [INAUDIBLE] earlier on.

[00:02:05] But when I'm writing my CSS code, I'm usually kind of concerned about the structure of my HTML, so I have this section where all of my to do's are. I have this, an ordered list with all of my to do's. And I'm used to being able to write HTML in a nice nested structure like this.

[00:02:31] And SAS lets me write CSS in that nested structure as well. So in here, let's say I wanted to add some styling to the list items in my main class. So I can come in here and write a selector for the main div much like you would in Vanilla CSS.

[00:02:57] And what I could do if I wanted to target the list items of this list. I could write a selector that went something like this, so for the owner, or excuse me, the owner list items, these are the CSS classes I would like to apply. But that's not super dry because if I also wanted to style d on our list, itself, I'd have to have another CSS declaration up there to do that.

[00:03:32] So one of the nice things you can do you in SaaS is nest those declarations. So within the main div, I'm going to add some styles to the UL. Let's say, this might break the layout but I'll add a nice big padding all the way around the ordered list.

[00:03:55] And then for the list items, I'm gonna change the font style, obviously, to Comic Sans MS to class it up a little bit. So our tooling found the changes to the SaaS, automatically recompiled. If I come back out here, looks like I need to be more specific with my list item styling but I've got my big padding around the UL.

[00:04:24] Obviously, we could just do that.
>> [LAUGH]
>> Kevin Whinnery: I won't actually fix it.
>> Speaker 2: I just saw a tweet that important is sounding like importing ants.
>> Kevin Whinnery: Importing ants.
>> Speaker 2: Into your CSS.
>> Kevin Whinnery: In fact, I think it might must not be the LI. There's another div in here called the view input, and it's a label so I don't know if it's a cascading down that far.

[00:04:54] So here if I did the label. I just have to see it in Comic Sans now, I have to get my fix.
>> Speaker 3: Actually, it's cuz of your CSS properties, use font style.
>> Kevin Whinnery: Font family, yeah, there we go.
>> Kevin Whinnery: There we go, much better.
>> [LAUGH]
>> Kevin Whinnery: Yes, so that's one of my favorite features is that you can keep your CSS much drier by nesting it in this way.

[00:05:32] And let's say, now that we've decided that Comic Sans is clearly the best font for this application, and we want to apply it globally. We can create a variable called app font or something like that, and essentially, set that equal to this string. So we can use this Comic Sans MS, font family declaration, and we can use that variable here.

[00:06:07] As the app font we could also say for our, I believe, it's an H one, I'll double check. And say for the H one in our application, I wanna do the same thing when you use the app font font family. So I've come out here and refresh, it is actually quite a bit better.

[00:06:31] I think they should have done that, to begin with. So few bits they are really useful. And then let's say, your CSS is getting a little crazy. You feel the need to break it up a little bit. If you want to import CSS into regular CSS style sheets, there is one and only one place you can do that which is at the top of the CSS file.

[00:06:59] And you can't do that nested within other CSS declarations. But what we can do with SaaS is move this content out to something called a partial, which by convention as a file name, we prefix it with an underscore. We can call this main.css. And here, in that SaaS file, I can have these declarations and not necessarily that you would structured in this way.

[00:07:38] But now, rather than declaring them in line, I can actually include,
>> Kevin Whinnery: The main.scss.
>> Speaker 3: Does anyone underscore on that?
>> Kevin Whinnery: The underscore is conventional. It denotes a SaaS file as a partial. And when you do the include, you don't actually need to include the underscore.
>> Kevin Whinnery: [INAUDIBLE] was.

[00:08:22]
>> Kevin Whinnery: What? You know what? I think I just goofed this up. I don't think I need the parenthesis. I think I can just do that.
>> Kevin Whinnery: Or maybe do I not even need that?
>> Kevin Whinnery: I might have to-
>> Speaker 4: Include or import?
>> Kevin Whinnery: What's that?
>> Speaker 4: Is it include or import?

[00:08:43]
>> Kevin Whinnery: I thought it was include.
>> Kevin Whinnery: And I think I do need the quotes but yeah, I think it might be important. Yeah, there we go. Yeah, it's the danger of doing it live, that's for sure. So now, if I refresh my page, I still have my same stylings there.

[00:09:09] So you can include like nested CSS, I mean this way as well. So basically, it gives your application CSS an entirely new bag of tricks that it didn't have before.
>> Speaker 5: What is it that's actually monitoring the SaaS files and compiling it to CSS?
>> Kevin Whinnery: Yeah, right on.

[00:09:29] So in our grunt file, the default task which runs the development apps server is this one the default task. And what that is gonna do is it's initially gonna compile our SaaS and run our JavaScript code through browserify like right away when we watch it. And then it's gonna launch this task concurrent dev.

[00:09:52] And that's gonna do two things, it's gonna launch two tasks, one of which is nodemon which is gonna watch for changes to our server-side JavaScript. And the other is this guy or is concurrent, where should I define that? Here we go. So here is where we define the task that we want to run concurrently.

[00:10:11] One of them is Watch which is gonna recompile our SaaS and our front end JavaScript. And then the other one is nodemon.
>> Speaker 5: So it's really grunt that's in the background, watching for changes to your Saas files?
>> Kevin Whinnery: Yes, it's a grunt plugin called Watch. It's in the contrib package here.

[00:10:36] So this Watch plugin has that capability. It can run tasks when a certain condition is true.