CSS can be immensely repetitive.

And maintaining it can be cumbersome.

For instance, how many times have you reused a color, a list of fonts,

or a link value in your style sheet?

Then later, due to a design change or

client request, had to spend valuable time changing each value.

Sass borrows certain concepts and features from programming languages to

make your style sheets less repetitive, faster to write and easier to maintain.

So let's start with a core feature of sass, variables.

Variables are one of the most important concepts in programming.

They provide a way of storing and keeping track of information.

When you create variables in sass,

you store values that you've referenced throughout your style sheets.

For example, if you use the same color for

a font, a background, and a border, you can declare a variable for that color and

reference that variable anywhere you use that color.

Let me show you how.

In the style.scss file,

let's use a variable to store this hex color value in the card h1 rule.

If you hover over it in workspaces, you'll see that it's a shade of teal.

This color is going to be repeated several times in our

project to style important elements like headings, icons, buttons and more.

Variables in sass are declared using the dollar sign.

So at the very top of the file, type a dollar sign to create a new variable,

and right next to the dollar sign with no space, you write the variable name.

Which can be any name you want.

It's helpful to use a name that clearly describes the variable's purpose.

For example, this color will represent the brand color, or

main color used throughout the site.

So we'll name the variable color-primary.

And assign it the hex value, #278da4.

Now let's replace each of the teal hex value with the new color-primary variable.

So I'll simply copy it then scroll down to the card h1 rule.

Replace the color value with color-primary, then right below

place btn-info's background-color with color-primary.

Give style.scss a save, and over in style.css you'll

see that says output the value 278da4, wherever we use the color-primary.

So in card h1 and btn-info.

Now the variable declaration itself and other variable references will never

appear in the CSS output because it isn't valid CSS.

Now back inside style.scss, at the very top,

let's create variables for our secondary and accent colors.

Right below color-primary, we'll create

a new variable called color-secondary, and

we'll assign it the value #b13c69.

Below that we create a variable color-accent and

give it the hex value, #eeea72.

We'll use the color-secondary variable in a later video when we style our buttons,

but let's use the color-accent variable now

to set the header paragraph's color value.

So I'll scroll down to the header p rule.

Add a color property and set it to color-accent.

Now variables aren't just for colors, it's common to create variables for

storing lists of fonts called font stacks.

So up here in our variables, let's create two font stack variables.

We'll name the first one font-stack primary.

And set it to Raleway,

sans-serif.

Right below we'll create the variable, font-stack secondary

And set it to Bree Serif, serif.

Now you may also see font-stack variable names like font-stack sans or

font-stack serif.

But I'll stick to this primary, secondary to this project.

Now I'll set the bodies, font-family, to font-stack-primary here in the body rule.

By replacing the font-family value with font-stack-primary.

Then right below in the h1 and h2 rule here,

I'll set the font-family value to font-stack-secondary.

So sass variables make the repetitive nature of CSS easier to manage, and

let you change property values in one place without having to find and

replace them across multiple files and directories.

So for example, if you're not to really feeling the color teal as your heading and

button background colors,

simply change the value of color-primary to a different color.

And you'll see the color values change all at once.

Now I'm usually cool with tomato but not in this case.

So I'll go ahead and change it back to the teal color.

Variables are one of the core sass features you'll use most.

So in the next video, I'll teach you a few best practices for

creating variable names in sass.