Join Ray Villalobos for an in-depth discussion in this video Working with variables, part of Sass Essential Training.
- View Offline
- If there's one reason to learn to use Sass, it's variables. It made working with CSS a lot easier. So let's take a look at how you can use variables in Sass to make your CSS easier to manage and update. So, I'm starting out with this simple HTML page. It's sort of a stylesheet that has a bunch of different types of elements in there, and we'll be working with this file throughout this course. So here on the left I have some very basic stylesheets. Now this is the style.scss file, not the final style.css file.
Remember, with my automation, this will eventually get processed into this file right here. So, instead of using color hexadecimal values like this, we can actually use color names so that our colors are easier to sort of manage in a single place. That's what variables allows us to do. So I'm going to come up here and just create a variable called $offwhite. And variables in Sass start out with a dollar sign. And then I'm going to grab the color value right here.
And this is actually the dark blue, so this is the off white color. And then I'm going to paste that in there. And then I can take this variable, and insert it wherever I want to use that in my CSS. So the same thing with this other color. I'm going to call this $darkblue, and then I'm going to take this one out of here and refer to my variable name down here. Paste that. And now that should work just fine.
So if I update this, it's not going to really change. So I'm actually going to reverse these. I'll use the $darkblue as the background color and the $offwhite as the regular color and save it so you can see it process. So that's a really dramatic change. Let's go ahead and add a few more colors. So now that I got some color names, I can sort of play around with my design. If I wanted something other than this $offwhite, say I wanted the $yellow. Then I could just type that color name right here, and my layout would update.
And that's pretty cool. Let's go ahead and change the regular color to be $darkblue, and we'll put this back to $offwhite here. That looks a little more normal. Another technique that you'll see used a lot is to actually create color names for the types of things that you'll be doing in HTML, and then use those names instead of these actual color names, like $darkblue and $offwhite, within your HTML. It's really up to you how you organize your CSS, but let me show you what that's like.
So you may create something like $color-main and then use one of the colors up here. So, $darkblue. And then do $color-backgrounds, and then use the other color variable name here, $offwhite. And then instead of using the colors, or the color names down here, then you use these new sort of interim color names. So this would be $color-main, and this would be $color-backgrounds.
So it's not going to really look any different, but imagine if you had a very large document, it would be sort of convenient to be able to go to a single section that had all of the usages of your color right within your variables, and then you'd be able to update everything up here instead of having to dig through a very long CSS file, or a bunch of other partials. Now another way variables can be super helpful is with fonts. Now when I begin a project, I usually go to something like Google web fonts, or Typekit, and pick through some different typefaces that I want to use.
But it's hard to see what the fonts are going to look like in context, even with using some of these tools, like clicking on Paragraph. So let's go ahead and try to get some fonts here. I'm going to do Roboto. And let's just go to Sentence here. Roboto Slab I think is a font that I like sometimes. And I'm going to hit Add to Collection. And then I'll do some other ones. All right, so once I have a few fonts in my collection, I like to go to this Use tab right here, and here you usually pick weights that you want to use in your project.
The default ones are fine. And the next thing you want to do is figure out how you want to import this. I usually like to import things into my CSS file, instead of the HTML document. So I'm going to click right here on this Import tab, and grab this import URL. And I'm just going to paste that at the beginning of our document. So now those fonts will be available to us. Now I could just place them in sort of these font-family places right here, or I can also create variables for those as well.
And that's really common, because, again, it's just easier to update everything in one place. So you may see a variable like $font-main. I'm going to try using Merriweather, and then as the backup use Helvetica, and sans-serif. And then I'm going to use $font-highlight. And I'll try something like Bree Serif here. All right, so since I've got those two font styles, then I can start using those variables down here.
So maybe my main font will be this variable that I called $font-main. If I save that, we should see this update. So this is what happens when I make a mistake. You can see that actually my process gives me a little bit of information about what I did wrong, and what's happening here is I forgot the semicolon at the end. So let's go ahead and save that. And now you can see that my fonts have updated. And if I want to, I can do something slightly different for my headlines.
So it's really common to do something like h1, h2, 3, h4, h5, h6. Or you can do some other ones. And then for these, I will do color. Actually, let me do a font first, font-family, and we'll do the $font-highlight. And let's go ahead and save that. And here, maybe I would like to use a color as the color of the headline. So let's go ahead and do color, and we'll create a variable called $color-headlines.
So grab this name up here, and we'll put it over here. And let's try something. So what do we want our headlines to be? Let's try the $purple color. And we'll save it. And now the headlines are purple. Eh, maybe I don't like that. And let's try $red. And that looks a little better I think. So by creating these different variables, you'll make it very easy to update your CSS. Sometimes you want to use the sort of straight color variables like this, and sometimes it's actually more convenient to create these colors that define where they're being used, so that you can, at any point in time, just look at this section of variables and immediately play around with the design that you have for your CSS document.
- Working with variables
- Nesting styles
- Creating mixins
- Conditional statements and loops in SassScript
- Extending your mixins
- Working with lists and maps