Preview
Video Player
00:00
00:00
Naming Variables
5:09By 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