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 Modular CSS with Sass Getting Modular with Mixins and Functions Pixels to Em Function

Posted by Carlos Chang Cheng
Carlos Chang Cheng
Courses Plus Student 12,030 Points

Don't understand why margin-bottom has (70px, 42px);

Hello, I don't understand why the margin-bottom has 2 arguments...

@function em($target, $context:$base__font-size){
@return ($target / $context) * 1em;
}
h1{
  margin-bottom: em(70px, 42px);
}

    ```

2 Answers

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points

Hello, One of the arguments is optional. It's being included because you don't want to use the base__font-size (which i guess is something like 16px). Notice that the em mixin has two arguments

  @mixin em ($target,  $context: $base__font-size)
    @return ($target / $context) * 1em;
  }

Notice the two arguments are $target and $context. Context has a default value, hence it is optional.

In your code 70px is the value for $target, and 42px is the value for $context.

  h1 {
    margin-bottom: em(70px, 42px);
  }

If you don't specify the value for $context, the $default__font-size will be used

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

Normally when using em we only need the 1 argument since the context is set to 16px by default.

But in this case the context was changed to 42px when we used em() to change convert the font-size., so we need to over-ride the default 16px with 42px.

Without doing so the margin-bottom would 4.375em (which is huge) compared to a more proportional 1.67em.