Introducing Sass Functions

[00:00:00]
>> Mike North: We've come so far using nesting, the parent selector. We've dealt with mixins, default arguments to mixins. We've looked at how we can pass a block to mixins. The next thing we're gonna add, it's a brand new dimension to Sass, and that is the idea of functions. This is another thing that It is not present in CSS, in anywhere near the form where we can use it in Sass.

[00:00:29]
So this is a link you're gonna wanna bookmark. And I didn't, it was not constructive to screenshot every possible function in Sass, and to create slides for them. We're gonna go over ones that I expect you to use. But the API docs are have a great listing that looks just like this.

[00:00:48]
Where you can see you know what comes with the language for free. These are relatively high performance because they're, this function is evaluated inside the SASS compiler which is written in C Right? And so unlike some of the functions we'll deal with later that we define ourselves, these are quite performant and you should feel comfortable using them broadly.

[00:01:14]
And just to go through what these are here, rgb, that's a color generation function, and this is something we can already do in CSS. So, great. Same with rgba, it just adds an alpha channel. Red, green and blue. Those are functions that will just return the value of a single channel of that color.

[00:01:34]
Only the r value, only the g value, only the b value. And we'll use that later. And then here, we can mix two colors together with a particular weight. And so that'd be like, 50% blue, 50% red equals purple. Right, tons of different colors, and let's go over a couple of these functions in detail.

[00:01:55]
The ones that you're going to need for the exercises you'll work on. So here's one called adjust hue. And we have already mentioned the use of hue when we were doing like the interpolation example, where we said like let's output the hue of green into a comment and it was 120 degrees.

[00:02:16]
So what hue means is like using a color wheel so that zero degree hue is straight up so you can see that 120 degrees which would be sort of down and pointing to the right. That is in the green area. And what adjust hue does, is it takes one color, preserves its saturation, and its brightness, and alters the hue by a specific angle.

[00:02:44]
So you can think of it like rotating around the color wheel. In this case, brightness would be going towards the center of the circle or away from the circle, right? All the way in the center to white no matter which angle you're at. And then saturation would be a dimension that's not represented on this color wheel.

[00:03:02]
And we would treat the whole space more like a cylinder or saturation might come out of the page. So this is actually a 100% saturation, that's this slice of the cylinder. So you see, here we can take 63F, which is at 225 degrees, and we can rotate it by 60 degrees, or the number 60, that would be fine.

[00:03:22]
You don't have to write the number deg. I like to, because it's very clear to developers what's going on here. Someone who comes across this, if they momentarily forgot that this is about a rotation. Now, that's a queue like that's what we're dealing with. And we essentially get something that is just a circular arc just at a different angle.

[00:03:46]
>> Audience 1: Can you use a negative value for the degrees?
>> Mike North: I believe you can use a negative value.
>> Audience 1: Right.
>> Audience 2: So it always by default goes clockwise?
>> Mike North: Yes.
>> Audience 2: So if you wanted to go-
>> Mike North: Positive values are clockwise.
>> Audience 2: So if you wanted to go counter-clockwise, I was going to ask, negative numbers, theoretically, how would that work if you wanted to go the other direction?

[00:04:04]
>> Mike North: I am blanking as to whether a negative value would work. I would expect it to, otherwise it's 360 minus whatever value. And you'll need to do that for this solution. Either a negative value or a 360 minus.
>> Mike North: Color functions we can build on top of those by darkening or lightening a color by a percent.

[00:04:27]
So what I do want you to notice here is that in this example, we're taking a blue and creating a darker blue from it. The percent is not multiplicative. So we're taking a color and we are subtracting 20% from its brightness value. We are not decreasing it's brightness value by 20%.

[00:04:47]
So if we were to start at 80 and decrease the brightness by 20%, we would end up at 60, not 64. 16% is 20% of 80. So we are subtracting 20%. So if you subtracted a 100%, you would be a black. I guess that example would [LAUGH] fit in both multiplicative and additive cases.

[00:05:12]
But just keep that in mind that its a 0 to a 100 scale and this is subtracting or adding. Same goes with saturation which is on a 0 to 100 scale and add or subtract. Saturation has to do with how much of a color is, how much of a channel is mixed into a particular color.

[00:05:34]
So full saturation would be like very vivid colors, and no saturation at all would be grey scale, does that make sense? You would have to talk to a designer to get a more eloquent definition of that term.