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

Takuya Hirata
Takuya Hirata
23,296 Points
Posted by Takuya Hirata
Takuya Hirata
23,296 Points

Function in sass

Hello. My function in sass returns actual code instead of value. Please check my function. Thank you.

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

.test { width: px-to-pc (400px, 1200px); }

return in main.css .test { width: px-to-pc 400px, 1200px; }

2 Answers

Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

Looks like you have a errant space in your width property under the .test selector.

Remove the space between "px-to-pc" and the opening parenthesis.

.test {
  width: px-to-pc(400px, 1200px);
}
Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You'll want to use the Sass percentage function:

@function px-to-pc($target, $context: $max-width) {
    @return percentage($target / $context);
}

.test {
    width: px-to-pc (400px, 1200px);
}