Course Agenda

[00:00:00]
>> Mike North: And here is the broad agenda for the topics we're going to cover as they pertain to Sass. So first, we're gonna go over the origins of the library. You know why it looks the way it looks? And we're gonna address the fact that there are two different file types, and one that we're gonna focus on today and one that we're not.

[00:00:23]
And we're gonna go over the basics, the very basics of how you can start with a CSS file, rename it, and then start to layer on new behavior as you improve the CSS. Then we're going to dive into variables and mixins. So these are tools you can use to parameterize your styles.

[00:00:47]
So if you have a button and you wanna have like a red, a green, a blue, and a yellow button, you shouldn't have to define what that button looks like over and over again. In fact, we can kind of design what a button looks like generically in terms of a color that we're handed.

[00:01:03]
And then use that generic definition for several colors in order to generate the CSS that we're looking to generate. And leave the door open for generating more buttons of different colors in the future. We're gonna go over something called control flow. So, if you've done programming before. If you've worked for things like ifs, and for-loops, and iteration, and data structures.

[00:01:32]
There are these concepts in the Sass programming language. In Sass script, right? Which is what we call this imperative code that we can write inside a style sheet. And we'll look at kinda of some practical use cases for applying these concepts, and some situations for it might not be necessary to sort of jump in to that extra level of complexity.

[00:02:00]
So once we kind of establish this baseline here, we're gonna take a step back and talk about CSS architecture. This doesn't retain to Sass directly, but it is important to think about different patterns as to how you can stay organized. And the type of architecture we're gonna talk about today is called BEM, B-E-M.

[00:02:22]
And it's a very popular way of keeping yourself sorted out so that you don't collide with styles between different concerns in your app. And then finally, we're gonna finish out today with the most advanced topic we're gonna cover which is, defining your own functions in Sass. So, what we're gonna end up with at the end is defining a function for something called relative luminescence.

[00:02:48]
And that has to do with determining whether one color is gonna stand out against another color effectively. So we'll use that in order to determine, given the background color of a button, should the text on the button be black or white? Based on whether the visual contrast is great enough for those two colors.