Responsive Web Design with Sass (SCSS syntax)

1. input.scss

@function pxem($pxval, $base: 16px) {
  // Function to take a pixel value and divide it by a base value in order to
  // return the size in ems. Default base value is 16px
  @return ($pxval / $base) * 1em; // multiply by 1em to convert px to ems.
}

body {
  background-color: #DCDBD9;
  color: #2C2C2C;
  font: normal 100% Cambria, Georgia, serif;
  margin: pxem(40px); // 40px ÷ 16px = 2.5em
}

h1 {
  font-size: pxem(24px); // 24px ÷ 16 = 1.5em
  font-style: italic;
  font-weight: normal;
}

h1 a {
  color: #747474;
  // The context is now 24px; i.e., the containing element -- h1 -- is 24px.
  // So we divide by 24px instead of the default base value of 16px.
  // 11px ÷ 24px = 0.458em
  font: bold pxem(11px, 24px) Calibri, Optima, Arial, sans-serif;  
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

2. screen.css

/* This is the CSS emitted by the SCSS above */

body {
  background-color: #DCDBD9;
  color: #2C2C2C;
  font: normal 100% Cambria, Georgia, serif;
  margin: 2.5em;
}

h1 {
  font-size: 1.5em;
  font-style: italic;
  font-weight: normal;
}

h1 a {
  color: #747474;
  font: bold 0.458em Calibri, Optima, Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

This appears to no longer work. I get an error saying...

Syntax error: 3.375em*px isn't a valid CSS value.