Sass Mixins and Arguments

[00:00:00]
>> Mike North: Variables are great, they give us some ability to compose things. Right? They give us the ability to define a color in one place and to bring it in to several different style roles and several different partials. But we need a little bit more if we want to compose things that are at a higher level.

[00:00:19]
Like entire sets of declarations, entire style rules themselves. And in SASS this is done by way of something called mixins. So mixins are the primary way of reusing style in SASS. The mental model here is that when you invoke a mixin, it's almost like a function that returns some style.

[00:00:46]
And that is merged right in to wherever you define your include. Include is the way you consume a mixin. And when we look at the basic example use case you'll see that sort of defining a mixin with @mixin and bringing it in with @include.
>> Mike North: So these things evaluate to no style in and of themselves.

[00:01:08]
So if you just had a CSS file and there was entirely comprised of mixins and you turned it into a CSS file, the file would be empty, right? These are designed to be consumed, they don't really do anything in and of themselves. So, I advise having an underscore mixins partial that you can bring in.

[00:01:29]
Usually you'll want to bring in variables first and then mixins after that because often times, you'll have a mixin that might depend on a global variable. Right? If you have, apply a particular theme to something that might grab some colors that are available globally. Alright so these aren't all necessarily pure functions in that they define output simply because of inputs they might borrow variables from the global scope, they certainly can.

[00:02:01]
Here's an example of how we can define a mixin so we're calling this Alert text. And it's just white text on a red background. And we're making the text capitalized, or small caps. And you can see here that we could bring this mixin into two places. One for error texts, which might be part of an alert, and the other here I'm doing something that resembles a form validation error where I'm using the CSS adder function to basically grab an HTML attribute and to use that as the content of this little pseudo selector here.

[00:02:42]
So two different use cases, one might be a notification that something has gone wrong, the other would be this is not a valid email address but they both are bringing in the same red background white text. So mixins also allow you to define variables that they take in and in fact this is the more common use.

[00:03:08]
If you have a mixin that takes no arguments, takes no variables, there is a better way to do that that we will get into later. So here you can see that we're able to pass in blue for the error text, and we're able to pass in red for has-error.

[00:03:25]
And we're gonna get the equivalent output that you would expect there, where it would be just as if we'd defined those three style declarations in each of these two classes, but the color would change in between them.
>> Mike North: So this is the basic concept, @mixin to define a mixin, @ nclude to bring it in.

[00:03:48]
Mixins do not need to be preceded with a dot. You just start writing the name of the thing,