Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Sass Basics!
You have completed Sass Basics!
Preview
By giving variables meaningful names, you'll avoid introducing unnecessary complexity into your stylesheets.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up