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 Functions Review

Posted by Olivia Posch
.a{fill-rule:evenodd;}techdegree seal-36
Olivia Posch
Front End Web Development Techdegree Graduate 19,720 Points

converting pixels to em

hello, everyone! In this last Quiz example from Sass Basics - Funtions I don't unsderstand this function:

@function get-em($px, $base-font: 16px) { @return ($px / $base-font) * 1em; }

In this function I would just write : @return ($px / $base-font);

Where the result is: 4.5em

But I don't Understand why in this exemple you write again * 1em at the end ? Like in the function example: @return ($px / $base-font) * 1em;

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Because you want to return an em value. If you didn't include the multiplier your function would return a px

So....

@return ($px / $base-font) * 1em;

Is what does the conversion

but the function call passes in the value i.e. $px that provides the number to convert.

Olivia Posch
.a{fill-rule:evenodd;}techdegree seal-36
Olivia Posch
Front End Web Development Techdegree Graduate 19,720 Points

so in SASS no matter what mathematical calculation i made, I always have to enter at the end the multiply plus the Unit as I will convert it... right? For example: 

@function get-em($px, $base-font: 16px) {

        @return ($px / $base-font) * 1em; //or

        @return ($px / $base-font) * 1rem; //or

        @return ($px / $base-font) * 100%; 

}