1 00:00:00,510 --> 00:00:03,430 So here's another misconception I've heard about Sass. 2 00:00:03,430 --> 00:00:04,450 I'm a designer. 3 00:00:04,450 --> 00:00:08,610 If I use Sass, it'll change the way I think, and turn me into a developer. 4 00:00:08,610 --> 00:00:12,560 No, Sass isn't gonna take control of your mind and turn you into a developer. 5 00:00:12,560 --> 00:00:16,080 But as we've seen, it can change the way you write CSS. 6 00:00:16,080 --> 00:00:19,810 Even though Sass does borrow features from certain programming languages, 7 00:00:19,810 --> 00:00:22,660 they're only there to make projects easier to build and maintain. 8 00:00:22,660 --> 00:00:24,660 Like variables, for instance. 9 00:00:24,660 --> 00:00:27,700 Earlier, I mentioned how CSS can be repetitive. 10 00:00:27,700 --> 00:00:31,800 Well, Sass variables make the repetitive nature of CSS easier to manage. 11 00:00:31,800 --> 00:00:35,350 Because they let us store information that's reused throughout a project. 12 00:00:35,350 --> 00:00:38,450 Like values for colors, font stacks, media query break points, 13 00:00:38,450 --> 00:00:40,420 or any reusable CSS value. 14 00:00:41,580 --> 00:00:45,260 So now we can clean up our code even further with variables. 15 00:00:45,260 --> 00:00:49,800 Because variables reduce a lot of the duplication in CSS declarations and 16 00:00:49,800 --> 00:00:52,170 they also make our code easier to read. 17 00:00:52,170 --> 00:00:55,700 Now, I like to keep all of my variables in a separate partial 18 00:00:55,700 --> 00:00:58,210 located inside the base directory. 19 00:00:58,210 --> 00:01:02,950 So let's create a New File inside our base folder. 20 00:01:02,950 --> 00:01:08,105 And we're going to name it _variables.scss. 21 00:01:10,020 --> 00:01:11,060 So before we move on, 22 00:01:11,060 --> 00:01:15,030 let's not forget to import this new partial into our stylesheet. 23 00:01:15,030 --> 00:01:21,250 So we'll go over to the index partial and we're going to import it at the very top. 24 00:01:21,250 --> 00:01:25,540 So I'm going to copy the base partial import, 25 00:01:25,540 --> 00:01:30,010 paste it right above it, and change the filename to variables. 26 00:01:31,320 --> 00:01:36,680 Now we'll need to make sure that we are importing the variables partial first, 27 00:01:36,680 --> 00:01:40,800 since this will contain all the global dependencies in our project. 28 00:01:40,800 --> 00:01:43,350 So now I can go ahead and save index. 29 00:01:43,350 --> 00:01:44,760 And close it out. 30 00:01:44,760 --> 00:01:48,620 And back in our variables partial, let's first create variables for 31 00:01:48,620 --> 00:01:50,920 color values in our project. 32 00:01:50,920 --> 00:01:55,000 Now, there are a lot of ways we can declare color variables, and you'll see 33 00:01:55,000 --> 00:01:59,300 tons of discussions and opinions on the web on how to write or structure these. 34 00:01:59,300 --> 00:02:02,790 So let's do what makes sense for our project here. 35 00:02:02,790 --> 00:02:06,420 So we're going to use a two-tier color variable method. 36 00:02:06,420 --> 00:02:10,210 The first tier will have descriptive color variable names and 37 00:02:10,210 --> 00:02:13,790 the second tier will be the functional variable names. 38 00:02:13,790 --> 00:02:17,810 Overall I think that will be a pretty maintainable solution for us. 39 00:02:17,810 --> 00:02:23,010 So because of that, I sometimes use this pretty neat tool called Name that Color 40 00:02:23,010 --> 00:02:25,660 for generating color variable names. 41 00:02:25,660 --> 00:02:27,990 And I've posted the link to it in the teacher's notes. 42 00:02:29,190 --> 00:02:34,570 So back in our variables file, let's first declare the descriptive variables. 43 00:02:34,570 --> 00:02:36,630 So we're gonna add a comment for that. 44 00:02:36,630 --> 00:02:43,860 So let's type descriptive color variables. 45 00:02:43,860 --> 00:02:46,900 So first, let's declare the variable name white. 46 00:02:49,420 --> 00:02:52,210 And for this, we're going to use the hex value fff. 47 00:02:53,540 --> 00:02:57,730 Now right below that, let's write another descriptive variable name. 48 00:02:57,730 --> 00:03:00,190 This time, we'll write black. 49 00:03:00,190 --> 00:03:05,090 And for this, we're going to use the hex value 000, which is pure black. 50 00:03:05,090 --> 00:03:08,010 And right below that let's do one more for gray. 51 00:03:08,010 --> 00:03:15,748 And for gray, we're going to define the hex value #878787. 52 00:03:15,748 --> 00:03:20,549 So next, instead of typing out the rest of the variables, I'll just go ahead and 53 00:03:20,549 --> 00:03:21,690 paste them below. 54 00:03:22,690 --> 00:03:25,950 You can also copy these variable names from the teacher's notes on the page. 55 00:03:25,950 --> 00:03:27,630 So, right below the ones we just wrote, 56 00:03:27,630 --> 00:03:30,220 I'm going to paste in the new variable names. 57 00:03:30,220 --> 00:03:31,260 And, in case you're wondering, 58 00:03:31,260 --> 00:03:35,770 these were color names generated by that Name that Color tool I just showed you. 59 00:03:36,770 --> 00:03:40,670 So, next, we're going to create a second set of variables that 60 00:03:40,670 --> 00:03:42,350 describe a color's function. 61 00:03:42,350 --> 00:03:44,110 So let's create a comment for that. 62 00:03:44,110 --> 00:03:49,880 We're going to say functional color variables. 63 00:03:49,880 --> 00:03:51,040 And for these variables, 64 00:03:51,040 --> 00:03:54,660 we're going to follow a specific pattern that makes them easier to read. 65 00:03:54,660 --> 00:03:59,180 So first we're going to define the generic term they all share, so for 66 00:03:59,180 --> 00:04:01,360 example, color. 67 00:04:01,360 --> 00:04:04,430 And then we're going to write a more specific description. 68 00:04:04,430 --> 00:04:08,860 So for example, here let's say color primary, or prim. 69 00:04:11,230 --> 00:04:16,637 And as the color prime value, we're going to use the yellow-orange variable. 70 00:04:18,220 --> 00:04:19,180 So let's create one more. 71 00:04:19,180 --> 00:04:23,529 Let's say color secondary, so let's say color-sec. 72 00:04:23,529 --> 00:04:29,510 And as the value for color-sec, we're going to define the river-bed variable. 73 00:04:32,340 --> 00:04:38,000 And we're going to do the same for our text color, so right below the primary and 74 00:04:38,000 --> 00:04:42,930 secondary colors, let's say color-text and 75 00:04:42,930 --> 00:04:45,910 then let's find the light text color. 76 00:04:45,910 --> 00:04:50,825 So we'll say color-text-light and as the value for 77 00:04:50,825 --> 00:04:55,469 color-text-light we're going to use the white variable. 78 00:04:55,469 --> 00:04:57,320 All right, so let's do a couple more. 79 00:04:57,320 --> 00:05:02,200 Let's do color-text-base for our base text color. 80 00:05:02,200 --> 00:05:06,410 So we'll create a new variable called color-text-base and 81 00:05:06,410 --> 00:05:09,960 the value for this will be the gray variable. 82 00:05:11,780 --> 00:05:12,640 And, one more. 83 00:05:12,640 --> 00:05:15,580 So right below, I'll just paste in the color-text prefix and 84 00:05:15,580 --> 00:05:18,280 let's say color-text-dark. 85 00:05:18,280 --> 00:05:22,120 And, for that, we're going to define the river-bed variable. 86 00:05:23,120 --> 00:05:26,470 So, I'll just go ahead and copy it, paste it as the value. 87 00:05:28,320 --> 00:05:31,880 So, once again, instead of writing out the rest of the color variables, 88 00:05:31,880 --> 00:05:35,180 I'm gonna go ahead and paste them below. 89 00:05:35,180 --> 00:05:37,520 But you can also grab these from the teacher's notes. 90 00:05:38,670 --> 00:05:41,520 So as you can see here in the second set of variables, 91 00:05:41,520 --> 00:05:45,730 we can even use color operations for certain color variations. 92 00:05:45,730 --> 00:05:49,790 Like we did here for the border-light variable and 93 00:05:49,790 --> 00:05:53,740 the shadow variable, we used an rgba function. 94 00:05:53,740 --> 00:05:54,290 All right, so 95 00:05:54,290 --> 00:06:00,250 now we can use these functional variables as color values in our style sheets. 96 00:06:00,250 --> 00:06:04,890 So, for instance, let's go inside our layout folder and open up our 97 00:06:04,890 --> 00:06:09,450 header partial and replace some of the hex values with our new variables. 98 00:06:09,450 --> 00:06:13,740 Now there's a handy shortcut in Workspaces we can use to find and 99 00:06:13,740 --> 00:06:15,950 replace values with variables. 100 00:06:15,950 --> 00:06:18,190 And that shortcut is Cmd+Opt+F. 101 00:06:18,190 --> 00:06:21,380 And for Windows, it's Ctrl+Alt+F. 102 00:06:21,380 --> 00:06:26,060 And the shortcut should also work in other text editors, like Sublime Text. 103 00:06:26,060 --> 00:06:30,080 So if, for example, let's say this was a much longer style sheet, we could say, 104 00:06:30,080 --> 00:06:35,290 we wanna replace this hex value here with one of our variables. 105 00:06:35,290 --> 00:06:39,390 So you can say replace ffa949 and we'll want 106 00:06:39,390 --> 00:06:43,770 to replace it with that color-prim variable, that yellow-orange color. 107 00:06:43,770 --> 00:06:49,650 So we'll say color-prim, and once you hit enter, I'll say yes. 108 00:06:50,830 --> 00:06:51,560 Yes. 109 00:06:51,560 --> 00:06:55,857 And as you can see it replaced our hex value with our color-prim variable. 110 00:06:57,530 --> 00:07:01,970 So next we can also replace this hex value here with one of our variables. 111 00:07:01,970 --> 00:07:05,670 So let's say color-body, 112 00:07:05,670 --> 00:07:10,400 which is white, as we can see here in the variables partial. 113 00:07:12,440 --> 00:07:14,900 All right so let's save our header file. 114 00:07:14,900 --> 00:07:16,520 Close it out and do a couple more. 115 00:07:16,520 --> 00:07:21,060 So let's open up our base.scss file. 116 00:07:21,060 --> 00:07:28,810 And, let's replace the body color hex value with the color-text-base variable. 117 00:07:28,810 --> 00:07:33,570 So, we'll say, color-text-base. 118 00:07:33,570 --> 00:07:36,470 So next let's scroll down to the h3 and 119 00:07:36,470 --> 00:07:41,285 change the color hex value to the variable color-text-dark. 120 00:07:44,200 --> 00:07:49,260 And let's also scroll down and add variables for our link color values. 121 00:07:49,260 --> 00:07:54,380 So first let's replace this RGB value here, which is actually just orange. 122 00:07:54,380 --> 00:07:58,578 With the color-link-default variable, so 123 00:07:58,578 --> 00:08:03,960 we'll say color-link-default, and right below that, 124 00:08:03,960 --> 00:08:11,080 we can replace the color lightblue with the color-link-visited variable. 125 00:08:12,280 --> 00:08:15,610 And finally, in the hover rule, we can keep the RGBA function, but 126 00:08:15,610 --> 00:08:21,700 let's change these three values to the color-link-default variable, 127 00:08:21,700 --> 00:08:25,000 and it will still take down the alpha to 0.5. 128 00:08:25,000 --> 00:08:27,760 So I'm gonna stop here, but you can go ahead and 129 00:08:27,760 --> 00:08:32,090 finish replacing the rest of the color values in our site with variables, and 130 00:08:32,090 --> 00:08:33,440 then I'll meet you in the next video.