3.6 Day 6: Data Types

Welcome to Day 6. Today you'll learn about these seven main data types supported by Sass. We'll have look at each one and we'll see how we can use them in your own projects. Sass supports seven data types. Numbers, strings of text, colors, Booleans, nulls, lists, and maps. Now, we're only gonna cover a few of these. We're gonna cover the most important ones, and we'll see some examples for each one. So let's go ahead and start with numbers. Now, for numbers I'm just gonna create a selector here, and illustrate it with some properties. So you can first of all have numbers with units. For example, 100 pixels. You have the value, and then the unit. And here it can be ems, it can be pixels, it can be inches, whatever you want. And then you can have decimal numbers without units. For example line-height 1.5, and then you can have whole number without units. For example, font-weight, let's say 800, and then it can also have percentage, for example padding 1%. These are the kind of numbers you can use in Sass. Let's move on to strings. Now for strings, let's also do a selector here. And let's start with this font-family, and then we'll start with a quoted string, Helvetica for example. And we're gonna follow with some unquoted strings, for example Arial, sans-serif. So as you can see Sass supports both quoted and unquoted strings, and our example of an unquoted string would be font-weight bold, so this right here is an unquoted string. Another example this is a pseudo-element, and this is a quoted string. Now we can also use these inside the variables. So for example, I can do a variable called string and I can put a value of element, and then one thing that you must know here is that when you're using interpolation, quoted strings are unquoted. So if I do something like parent- String. This will actually be compiled to parent elements. It doesn't matter if I have quotes or not here. I can also do this, and unquoted string and it's going to work exactly the same, but interpolation on quotes, quoted strings, and that's a very quick look at strings. Now let's move on to colors. Now for colors there are a few ways that you can use to represent a color in Sass. For example, you can start with the traditional hex code so you'll do, cccccc. Now this is just a very simple example. Another way is to use the RGB function. So for example, I can have. Background color, set that to rgb, and let's represent white here, 2555 all the way, and rgb stands for red, green, blue, and these values stands for the amount of red, the amount of green, and the amount of blue. You can also use the variation of this function which is rgba that adds an alpha channel. For example, rgba, let's do black 0, 0, 0, and light 0.5. So this 0 represents full transparency. 1 represents full opacity. Also, you can use hsl function, which stands for hue, saturation, and lightness. So I can do the border-top-color, for example, hsl, otherwise, do a random value here. Yeah, this is also valid. You can also use hsla, which just like rgba adds an alpha channel, or you can simply use a named color for example blue or red or green or cyan or magenta like this. Now if you want a full list of all the named colors that you can use in Sass, you can go to this address right here. It's actually the repository in GitHub. And you're going to find a big list of all the named colors. As you can see here, there are a lot of them. So, that's good to know if you're doing an app or just designing a website that uses a lot of colors. And yeah, that's basically how you define colors in Sass. Now the final two data types we're gonna talk about are lists and maps. Let's start with lists. Now lists are how Sass represents the value of certain CSS declarations like margin or font or padding. Their series of other values separated by either spaces or commas. So, for example, this right here is a list. This right here is also a list, but it's a list with one item. So let's actually see more examples. I'm just gonna define some random selectors here like a sidebar. We can do padding, 3em, yeah, so 3em. This is a list with one item. And you can also do something like margin, 1em, 2em, 3em, 4em. This is a list with four items, and then you can do something like font family, and you can define Helvetica, Arial, sans-serif. This is also a list with three items separated by commas, and then you can also have lists that contain other lists for example box-shadow. You can define multiple box-shadow properties. So you can have one that looks something like 0 0 3 pixel 999, and then you can have another one that says something like 10 pixel 10 pixel 20 pixel 555. So this is list, yeah. Item one, item two, separated by a comma, and this is another list with four items separated by spaces. Now, some lists might combine spaces with commas. For example, let's say body with a class of serif. You'll get a font 400, 15 pixels, 1.5 Georgia serif. So we have one, two, three, four items separated by spaces and a comma. So that's basically it for lists. Now finally let's move on to maps. Maps are lists represented by key value pairs. The difference is they can not be converted to plain CSS. So maps looks something like this. Let's actually define one that's called colors. So you define them with the dollar sign just like a variable, but for their contents you must use parenthesis and then key value pairs, so you must have one key, for example the 1, but this can be of any data type, and then a value. Let's say something like this, and you would separate these values or these pairs with commas, and then you have two, and another value. If it's the last value, you don't need a comma anymore, so this is not necessary. You can also have a list that looks like this. Color-1 red, color-2 blue. So you can use quoted strings as the key. You can also have maps that have lists as values for example, margins. You can have a simple string here like, for example, tight. Maybe something like this, or a compact. A list with a single item, or maybe one that has a different unit. It doesn't really matter. You can put whatever you want in a map. Now, there is one important thing to note here, and that is if the inner lists have the same separator as the outer lists, you must use parenthesis. So what does that mean? Well, let's say for example that we have a map here that is called font or fonts, and in here we're gonna do an option-1 that says Arial and sans-serif and an option-2 that says Helvetica and sans-serif. Well, if you're trying to compile this you're going to get an error because the inner list has the same separator as the outer list, which is the comma here. So, if I were to have a space separator here, it would have been fine, but since we have this, we gotta use parenthesis on both of these elements Just like that. All right, so now that you have all these maps how do you use them? Well, it's very simple. You have to use a function called map-get. So let's do our random selector here, footer for example. And let's try and get this color here. From colors,we're trying to get this one. Well, you would simply do, let's say we're doing the background color. You would do map-get. You would put in the name of map. In our case it's colors, and then the key is this one, 1 or 2. In our case it's 1, so we'll just put 1, and that will compile 2 for background color 89C3AB, which is our value here. What if you want color-2 from this for a border color, for example? Well let's actually duplicate this, map-get. We'll do additional colors, and the key, this is important. We have to use it with quotes. If it has quotes Color-2, and that will get a blue border. What about the compact margin? Well, that's also easy. You would do the margin, map-get, the name of the map, and the key will be compact, and now I'll get a 30 pixel margin. You can also call a value from the same map or whatever you want. So, for example, let's say that I want for padding I want it to be tight, and that will give me a padding of 10, 20 pixels. The exact values that I have here on this list, and let's see what happens if I want a font from here. Let's say I want option-1. Well, I would do map-get again, fonts and I would do option-1, and that compiles to this. Notice it got it without the parenthesis, so the parenthesis is only for use in here in the map. They won't be retrieved when you're using map-get, and that's it for maps and in fact for all the main data types. Now apart from these as I said there are a few more. There are Booleans that are either true or false, but they're mostly useful in operations and functions. And there is also a null data type that equals to nothing basically, and that's useful when maybe, you want to remove the value from a variable. For your exercise, there is something different this time. Your task is to create an SCSS file that allows you to change the typography theme of a page by adding the class of either theme songs or theme-serif to the body tag. Now the two themes should be easily changeable, and the output should be similar to this one. Good luck. Those are the data types you can use in Sass. Now, let's move on to Day number 7 where you'll learn what kind of operations you can do with these data types.