Naming Variables5:09 with Guil Hernandez
By giving variables meaningful names, you'll avoid introducing unnecessary complexity into your stylesheets.
In the previous video you learned that a variable name should clearly 0:00 describe the variable's purpose or function. 0:03 For example, the name font-stack-primary clearly communicates that it 0:05 holds the value of your site's primary font stack and 0:09 color-primary represents the main color of the site. 0:12 By giving variables meaningful names you'll avoid introducing 0:15 unnecessary complexity in your style sheets. 0:19 For instance, say you named this variable teal instead of color-primary. 0:21 Well, teal doesn't reflect the purpose of this color. 0:26 What if the branding needs to change, and that teal needs to be dark blue? 0:30 Well, you could change the value of the teal variable to a dark blue color value, 0:33 but that will be pretty confusing. 0:38 Then you and your fellow developers will need to remember that wherever 0:41 teal is used really means dark blue. 0:44 Multiply that problem by tens or 0:47 hundreds of variable names that describe what a variable looks like 0:48 instead of its purpose and you lose one of the biggest benefits of variables. 0:52 Using descriptive variable names makes your style sheet super flexible. 0:55 You can change the value of color primary to any color and 1:00 it will always communicate the same meaning. 1:03 Now there are some use cases represent the actual color value for 1:06 instance if your project uses the color white in several places. 1:11 You can store in a variable using a descriptive name like white. 1:15 Currently the page's main heading and 1:22 learn more buttons have their text color set to white. 1:25 So let's replace the hex values with our new variable. 1:29 So in the header h1 rule, we'll replace the color value, With white. 1:34 And scroll down to the button info rule and 1:41 replace its color value with our white variable. 1:45 I've posted links to resources and videos about when and 1:56 how to use descriptive variable names in the teachers notes. 1:59 If your variable name uses two or more words, for example color or 2:03 primary or font stack secondary, it's recommended that you 2:07 follow the hyphenated convention CSS uses for property names and values. 2:11 So that means it's best to avoid using underscores and 2:15 camel case to separate words. 2:19 Following this convention will make your style sheets easier to read. 2:21 Finally let's create four more variables that store common colors on our site. 2:26 So right below the color accent variable 2:30 we'll create the variable color-shade, 2:35 set it to #ee which gives us a light shade of gray. 2:40 And right below we'll create the variable Color-text. 2:45 Set this one to #343434, 2:49 then create the variable color-bg. 2:53 Set it to #3acec2. 3:00 And finally right below color-bg we'll creat 3:05 color-bg-light and we'll set this one to pound 009fe1. 3:09 We'll use the color-text variable as the body text Color value. 3:21 Then use the $color-bg and $color-bg-light variables and 3:28 the header gradients color values. 3:33 And we'll use the color shade variable, for 3:35 the light grey rounded borders and the footer background colors. 3:39 So next why don't you practice using variables on your own 3:44 by replacing the color values in the style sheet with their corresponding variables. 3:47 There is a handy shortcut in workspaces you can use to find and 3:52 replace values with variables. 3:55 Press Cmd+Option+F on a Mac, or Ctrl+Alt+F on a Windows machine. 3:57 Type the value to replace, and 4:03 the variable that will replace it, then choose which values you'd like to replace. 4:08 This short cut also works in popular text editors like Adam and Sublime Text. 4:18 And you can see how I replace the values when you download the project files and 4:22 open the directory for this video. 4:26 In this stage you learn that Sass is an extension of CSS that 4:28 gives your style sheets enhanced functionality. 4:32 And the tool itself is a preprocessor that translate Sass or 4:34 SCSS syntax into plain CSS. 4:38 You learned to use the SAS command and watch option for compiling your SAS to CSS 4:41 and we studied how variables work in Sass along with best practices for using them. 4:46 We're just getting started using SAS. 4:51 In the next stage, we'll explore features that let you nest selectors and 4:53 reference parent's selectors inside nested rules. 4:56 You'll learn to make your CSS cleaner unless repetitive with 4:59 reusable chunks of code called the mix-ins and 5:02 how to allow a selector to inherit the properties of another selector. 5:05 See you soon 5:08
You need to sign up for Treehouse in order to download course files.Sign up