Declaring and Using Variables

CSS can be immensely repetitive. 0:00 And maintaining it can be cumbersome. 0:02 For instance, how many times have you reused a color, a list of fonts, 0:04 or a link value in your style sheet? 0:08 Then later, due to a design change or 0:10 client request, had to spend valuable time changing each value. 0:12 Sass borrows certain concepts and features from programming languages to 0:16 make your style sheets less repetitive, faster to write and easier to maintain. 0:19 So let's start with a core feature of sass, variables. 0:23 Variables are one of the most important concepts in programming. 0:27 They provide a way of storing and keeping track of information. 0:30 When you create variables in sass, 0:33 you store values that you've referenced throughout your style sheets. 0:35 For example, if you use the same color for 0:37 a font, a background, and a border, you can declare a variable for that color and 0:40 reference that variable anywhere you use that color. 0:44 Let me show you how. 0:47 In the style.scss file, 0:47 let's use a variable to store this hex color value in the card h1 rule. 0:51 If you hover over it in workspaces, you'll see that it's a shade of teal. 0:56 This color is going to be repeated several times in our 1:00 project to style important elements like headings, icons, buttons and more. 1:03 Variables in sass are declared using the dollar sign. 1:09 So at the very top of the file, type a dollar sign to create a new variable, 1:12 and right next to the dollar sign with no space, you write the variable name. 1:19 Which can be any name you want. 1:23 It's helpful to use a name that clearly describes the variable's purpose. 1:25 For example, this color will represent the brand color, or 1:28 main color used throughout the site. 1:31 So we'll name the variable color-primary. 1:33 And assign it the hex value, #278da4. 1:38 Now let's replace each of the teal hex value with the new color-primary variable. 1:46 So I'll simply copy it then scroll down to the card h1 rule. 1:51 Replace the color value with color-primary, then right below 1:56 place btn-info's background-color with color-primary. 2:02 Give style.scss a save, and over in style.css you'll 2:07 see that says output the value 278da4, wherever we use the color-primary. 2:12 So in card h1 and btn-info. 2:19 Now the variable declaration itself and other variable references will never 2:24 appear in the CSS output because it isn't valid CSS. 2:28 Now back inside style.scss, at the very top, 2:32 let's create variables for our secondary and accent colors. 2:36 Right below color-primary, we'll create 2:41 a new variable called color-secondary, and 2:46 we'll assign it the value #b13c69. 2:51 Below that we create a variable color-accent and 2:55 give it the hex value, #eeea72. 3:01 We'll use the color-secondary variable in a later video when we style our buttons, 3:06 but let's use the color-accent variable now 3:12 to set the header paragraph's color value. 3:15 So I'll scroll down to the header p rule. 3:18 Add a color property and set it to color-accent. 3:24 Now variables aren't just for colors, it's common to create variables for 3:28 storing lists of fonts called font stacks. 3:32 So up here in our variables, let's create two font stack variables. 3:35 We'll name the first one font-stack primary. 3:39 And set it to Raleway, 3:46 sans-serif. 3:51 Right below we'll create the variable, font-stack secondary 3:55 And set it to Bree Serif, serif. 4:05 Now you may also see font-stack variable names like font-stack sans or 4:12 font-stack serif. 4:16 But I'll stick to this primary, secondary to this project. 4:17 Now I'll set the bodies, font-family, to font-stack-primary here in the body rule. 4:20 By replacing the font-family value with font-stack-primary. 4:28 Then right below in the h1 and h2 rule here, 4:32 I'll set the font-family value to font-stack-secondary. 4:35 So sass variables make the repetitive nature of CSS easier to manage, and 4:43 let you change property values in one place without having to find and 4:47 replace them across multiple files and directories. 4:51 So for example, if you're not to really feeling the color teal as your heading and 4:54 button background colors, 4:59 simply change the value of color-primary to a different color. 5:01 And you'll see the color values change all at once. 5:06 Now I'm usually cool with tomato but not in this case. 5:11 So I'll go ahead and change it back to the teal color. 5:14 Variables are one of the core sass features you'll use most. 5:19 So in the next video, I'll teach you a few best practices for 5:21 creating variable names in sass. 5:24