Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Presian Nenov
Presian Nenov
3,871 Points

Why do we need to use -- in the variable names?

Up until now if you wanted to separate words in variable names, or anything, you'd just use one hyphen, for example: $color-main.

I'm not sure if I missed something, but why in $font-family--primary do we use two hyphens at the end?

1 Answer

Travis Alstrand
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 45,998 Points
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Data Analysis Techdegree Graduate 45,998 Points

Hey Presian Nenov !

I'm not sure what video this is referring to as this was posted in General Discussion, but it looks like it is SASS correct?

I'm not familiar with using two hyphens within the variable name like this, but it may be to make it easier to read and separate it a bit from the font-family beginning. Say we have multiple font-family variables, it may be easier and quicker to catch which one you're looking for with an extra 'space' in there.

$font-family--primary
$font-family--secondary
$font-family--footer

In CSS, it's mandatory to start your variable names with two hyphens

--font-primary
--font-secondary
--font-footer

This is done to to differentiate them from regular CSS properties. You can read more on CSS Variables here

Here is the SASS Basics video on naming variables that came to mind, but if you're referring to a different video / course, please post it so I can check it out! Thanks! :smiley:

Presian Nenov
Presian Nenov
3,871 Points

Yes it is SASS, I'm working through the "Modular CSS with Sass" course and saw Guil using two hyphens in the names and was confused.