3.7 Day 7: Operations

Welcome to day 7 where you'll learn about the different types of operations you can do inside SAS. So let's begin. SAS supports operations with numbers, colors, strings, Booleans and lists. Now we'll only cover numbers and strings, since the other are a bit more advanced. When it comes to numbers, you can use the standard arithmetic operations, such as addition, subtraction, multiplication, divisions, and the modulo. Also on all types, you can use the relational and equality operators like equal, different than, higher than, less than, and so on. Now let's begin with numbers, and see exactly what we can do with these. Let's start with a simple selector here, and let's do margin. 10 pixels plus 20 pixels. Now this will compile to 30 pixels, so if I add two values with the same unit, SAS does the normal addition. Now if I were to change pixels here to ems, it wouldn't work because these are incompatible units. So you have to be careful to use the same units. Also I can do multiplication between a unit number and a unitless number, this is the only way it works. So for example, padding 20 pixels times 2. And this will compile to 40 pixels. Now if I were to do 20 pixels times 2 pixels, it won't work. If I were to do 20 times 2, it will work. But when units are involved in multiplication or division, you cannot have units on both numbers. You can also do subtraction. So for example, font size I can do something like 39 pixels minus 10 pixels and that will give us 29. Now, let's talk about division because division is a more special case. Let's start with a simple decoration here, 20 pixels/1.5. Now this one doesn't do the actual division. It just prints out the values the way they are. On the other hand, if I were to define a variable baseline, for example, the 2ems. Then if I go into margin-bottom, and I say baseline divided by 2, this will actually do the math operation, it's gonna be 1em. Now if for some reason you do need this format, but you do need to make the division. For example, let's say margin-top and you would do 2ems divided by 2. This is actually compiled to this, but if you want to make the operation, you would use parenthesis. And now it's gonna be 1m. You can also use multiple operators as the value for the same property. So for example, you can do padding. For example 10 pixels plus 20 pixels divided by 2 and that will equal to 20 pixels. It's just like math, the division will take precedence. It will give us 10 pixels here plus 10, it will give us 20. Now, we can also use a relational operators. For example, greater than. So you can do stuff like, for example, content. Let's say 10 pixels is higher than 20 pixels. And the result will be false. So this actually returns a Boolean. That's the other data type that I've mentioned. Now when dealing with operations, you must know that parenthesis changes the order of operations, just like in normal math. So let's take a simple example here. Let's do margin-right. We'll do 1 pixel, plus 3 pixels times 3, and we'll do the same for margin-left. Let's say, but we'll put these 2 in parentheses. And we get different results. For the first one, we get 10 pixels. Which is 3 times 3, 9 plus 1 10 and the second one is 12 which is 1.3 times 3 equals 12. And those are the basic for number operations. Now, lets talk about string operations. Now, when it comes to string operations, probably the most common thing you'll do is to concatenate strings. That means to glue them together to form a single main string. Let's take for example, the font family. Let's say that I want to do sans plus serif, and that will give me sans-serif. But let's say, for example, that I want to do sans in quotes and serif just without quotes. Well, this will give me sans-serif and quotes. So here when we're dealing with quoted plus unquoted strings, whatever is to the left of the plus sign will dictate the outcome. So in this case, to the left I have unquoted string plus a quoted string. Well, this will result an unquoted string. While here I have quoted plus unquoted, so I'm gonna get a quoted string. You must be careful about this difference. Now, what about quoted plus quoted? Well, let's consider this, Click Me and let's see what happens. We get a quoted string. Now, when it comes to string operations, you can also use interpolation. So, let's consider a simple example, where we have a variable called content, and we'll do a quoted string here. And then for the actual content, we're going to say this is a content button with a width of 5 times 23 pixels. So the first thing we'll see is that interpolation unquotes a string. Now so it unquoted this default value here. And the other thing we can see, is that we can actually make operations using the interpolation syntax. So here, if I were to put 5 times 23 without the interpolation, I would just get a basic string. But with the interpolation, it actually does that operation and it gives me a 115 pixels. And that's it for number and string operations. Now for your assignment, you have a CSS file and your assignment is to write the corresponding .scss file while respecting a few rules. First of all, you're not allowed to use any number or string as property value. It can only use the value of 100% and the function map-get. Of course, you can use operations where you see fit, and then all the values need to be retrieved from a map. Good luck. And with that, you've actually finished Week 1 of the 14 days to learn SAS course. Congrats for making it this far. I hope everything is okay, you're learning new things, and you're excited about Week 2. That starts with the next lesson where you'll learn about the import directives.