Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics Write Smart and Efficient CSS with Sass Write a Sass Function

David Moorhead
David Moorhead
17,990 Points

Appreciation toward the one who helps answer Task 3 of 3: CSS Custom Function.

Task 3 instructions are: Finally, create a rule that targets h1. Use the px-to-rem function to convert a font-size value of 60px to a value in rem units.

The @function below is the most recent of my final answers. The bummer read: Make sure you name the function 'px-to-rem.'

style.scss
$base-font-size: 16px;

// Write your function here

@function: px-to-rem($font-size: 60px, $base-font-size: 16px) {}
h1 { @include px-to-rem(60px / 16px) * 1rem; }

6 Answers

Hey David! I was stuck on this for sometime my self for a whole day!! Hope this helps!

@function px-to-rem($target, $context: $base-font-size){ @return ($target / $context) * 1rem; }

h1{ font-size: px-to-rem(60px); }

Steven Parker
Steven Parker
210,472 Points

Here's a few hints:

  • the first function argument should be "$target", and it does not need a default value
  • the default for "$context" should be the variable itself, not the value from it
  • all of the calculations should be performed inside the function
  • the function should "@return" a result
  • no "@include" is needed
  • the styling rule for h1 should include a "font-size" setting
  • the function should be called in the value part of the setting
  • no formula will be needed in the styling rule, just pass the value to be converted to the function

I'm betting you can get it from here.

David Moorhead
David Moorhead
17,990 Points

Hello, Stephen,

Thank you. I've given you a Best Answer reward for showing up and writing your response!

Alas, I've still not got accurate syntax to pass the task. I am still seeing numerous bummers. For a while, I'll have to sit without a Web Design chevron for track completion; life won't change with it.

Thanks again, Stephen. :)

Steven Parker
Steven Parker
210,472 Points

Let's not give up, show what the code looks like now that you've applied the hints.

David Moorhead
David Moorhead
17,990 Points

Hi, Steven,

Thanks for your encouragement. The syntax I thought I understood, I don't, and I'm about to pull my hair out! The answer should be so simple yet misunderstanding has reigned.

The bummers with various messages keep coming after applying codes from your hints and from Hernandez's videos, which I was disinclined to indulge another watch. I watched them anyway, hoping something would pop for me. Here is the most recent of numerous attempts for completion of the task.

@function px-to-rem($target, $context: $base-font-size) {
    @return h1 (60px / 16px) }
Steven Parker
Steven Parker
210,472 Points

When the instructions say "In the @return statement, divide $target by $context, and multiply it by 1rem.", they mean multiply using the variables by name. Don't substitue values for them. And you still need to multiply by 1rem.

Also, there's a stray "h1" there, which is not part of the function or task 2.

When you get to task 3, you'll create a CSS rule for "h1", but that will be outside of the function.

David Moorhead
David Moorhead
17,990 Points

Hello, Steven,

Thank you for the attention and expertise you've shown!

I'm moving on to the next thing, leaving CSS behind until the brain has had more time for sorting syntax. If you wish, keep this page "Followed," and one day, you'll see I've responded with good news.

Best,

David :)

David Moorhead
David Moorhead
17,990 Points

Franklyn, It Worked!

You get FIVE GOLD STARS * * * * *, and a big smile :) !!

Thank You! David

Steven Parker
Steven Parker
210,472 Points

:tada: (I followed, as you suggested.) :wink: