CSS Calc()

[00:00:00]
>> Jen Kramer: The first thing that I'm gonna talk about is CSS Calc(). What is it exactly, anyone wanna define Calc?
>> Speaker 2: A method for calculating values in CSS.
>> Jen Kramer: It's a way to do math in CSS, directly in CSS, okay? That's basically it. And these are the things that you can do.

[00:00:16]
Addition, subtraction, multiplication, and division. In other words, no exponents, I actually have an example for you later where exponents would have been really, really helpful, okay? [LAUGH] But addition, subtraction, multiplication, and division are what we have to work with here. And you can do the length, frequency, angle, number, time, integer, okay?

[00:00:36]
Remember that time, or frequency, and so forth, those are generally associated with animation. Some of the other things like length, or numbers, and integers, and so forth, those are associated with all kinds of different CSS properties. And the way Calc is gonna look is it's something like this.

[00:00:53]
So you're going to display your property, and then you'll say the word calc, and then you'll do whatever math you want to do inside of that. Anyone want to make a comment on that particular line of code? A 100% minus 80 pixels. Anyone want to say anything about that?

[00:01:09]
Yes, David?
>> Speaker 2: Units are different, and you're gonna struggle to resolve that in the browser.
>> Jen Kramer: Units are different and we're gonna struggle to resolve that to the browser, anyone agree?
>> Speaker 2: Now, I thought that was the cool part about it.
>> Jen Kramer: Exactly, that is the cool part about it because Sass will [SOUND], Sass does not like that kind of thing.

[00:01:30]
You have to have the same kinds of units when you do math with Sass, but with CSS Calc, It is very happy to do that math for you. It will in fact do that now, and it will not blow up, okay? So let's talk about compatibility, I took this screenshot on August 9th.

[00:01:47]
So this is what compatibility looks like at this point in time, usually when we talk about compatibility we really mean IE, and that's tend to be true, it's a little bit buggy in IE like all the good things are. [LAUGH] Okay? But 96% support globally at this point in time, according to can I use, okay?

[00:02:08]
So anyone wanna think about what are some of the big advantages that we can work with Calc over Sass. This one, okay? So again, you can do weird math. Remember that if you do have to support IE, you can always put in something right before it. IE willl actually render what equals 90% in this particular case, it would look at width of this Calc thing, and it would just, I don't know what that is, and ignore it and move on, right?

[00:02:37]
If we do have people here who still need to support IE, so that's one way that you can go about doing that. This is also a very nice way to document your math, okay? Where did you get that random looking number? [LAUGH] How often have you said that as you were looking at something?

[00:02:53]
Why did we say this weird string of numbers? Yes? Okay, so this is a nice way that you can do that. There's more reading here at CSS-Tricks as always great resource, so we'll talk to you a little bit about that. So here's one of the advantages. Again, from that same article in this particular example, we're floating two things next to each other, okay?

[00:03:16]
Back in the old days, our heads used to explode because one was 40, one was 60. We of course, wanna gap in between the things, we put in the gap, and then it would wrap onto the next line. Cuz it actually adds up to be more than a 100%, once you put the gap in place, right?

[00:03:32]
Okay, so now we can just simply say 40 and then 60 minus 1em. Isn't that great? And other things float next to each other. Wow, that already makes your life easier, yeah? Here's documentation of weird numbers, I don't know why you build a seven column grid system, but maybe you'd want to, and where did you get 14.2587%?

[00:03:58]
Designer? What were you thinking? Well, Designer did all this math right and the math looks like this, really easy. All we do is take 100% divided by seven, that's one box. If we want it to be twice that wide, we take 100% divided by seven multiplied by two.

[00:04:14]
Yeah, that's where the weird numbers come from. So now, we've documented our math really, really nicely. So that's something that we can do with Calc. There's a couple of quirky things about Calc that you need to remember. And that tends to be writing these things out. What I would suggest is that you always put a space around whatever your operator is.

[00:04:35]
So space, plus sign, space, whatever things you were adding together. The reason why is because remember that in CSS, the slash operator can be used in other places in CSS, okay? That's one of the things you need to remember. Here, it's gonna have a hard time determining what is a minus something and what is a negative number.

[00:04:57]
So that's another reason to go on ahead and put in this whitespace around it, okay? And you can nest Calc statements inside of each other as well. Calc inside of a Calc inside of a Calc becomes effectively parentheses, all right? So far so good? And you can combine it with Sass.

[00:05:15]
So if you're doing something in Sass and you wanna actually use Calc, this is the way you'd go about pulling in a Sass variable. This is the syntax that you use, all right? So remember, Sass variables are declared with the dollar sign, all right? Here, the way we're going to render that if we're using actually Calc.

[00:05:32]
We're gonna put the curly brackets around that variable and a pound sign in front of it. You've probably seen that syntax before in other applications in Sass. It indicates the CSS take the value of that variable, yeah? Everybody good so far? Okay, anyone remember Please Excuse My Dear Aunt Sally?

[00:05:55]
I always ask this question and people are like, Please Excuse My Dear Aunt Sally, I never heard of that. It must have been an exclusive thing to elementary schools in Virginia where I grew up. So Please Excuse My Dear Aunt Sally is the order of operations, right? Do your parentheses first, then your exponents, and then multiplication, left to right, addition and subtraction, left to right, that's how we used to remember it.

[00:06:18]
So when you see something wild and crazy like that, we're calculating something really weird, remember your order of operations. So multiply the things and then add them together. So basically a little bit about Calc, use it anywhere to perform your number calculations. Don't forget about your whitespace. You can mix and match units, that's the big differentiator from Sass, okay?

[00:06:40]
You can use parentheses or nest your calc() statements. Remember your order of operations and it's well supported by browsers in use.