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

CSS Sass Basics Write Smart and Efficient CSS with Sass Custom Functions

gene c
gene c
13,630 Points
Posted by gene c
gene c
13,630 Points

Why arguments passed in SASS functions have dollar sign in front of them? E.g. $target, $context..

Does this mean we have to declare $target and $context as variables beforehand?

and also, must we specifically write $target and $context?

can we use other words like say, $number and $width?

Something like that:

@function px-to-pc ($number, $width:1000px) {
 @return  ($number / $width) * 100%;
}

2 Answers

jlampstack
jlampstack
23,932 Points

The $ dollar sign is used to declare variables in Sass.

We must use the $ dollar sign to let Sass know the parameter is a variable and not a string, integer, boolean etc.

Joel Bardsley
Joel Bardsley
31,246 Points
Joel Bardsley
Joel Bardsley
31,246 Points

The dollar signs are just the Sass syntax, like how you use them for Sass variables in general, ie:

$primary-color: #FFDA6A;
$secondary-color: #548DFF;
// etc.

Just like variable names, you can name the arguments passed into functions/mixins anything you like, so your example would work just fine.