I'm following a new SASS structure guide here.
Trying to use the PX to EM mixin and seems like the variable isn't getting through. But I have the base importing the mixins and the typography is imported last.
Main SASS file:
// Modules and Variables
@import "modules/base";
// Partials
@import "partials/normalize";
@import "partials/typography";
BASE.scss:
@import "colors";
@import "fonts";
@import "animation";
@import "mixins";
_mixins.scss:
/* PIXELS to EM */
// eg. for a relational value of 12px write em(12) when the parent is 16px
// if the parent is another value say 24px write em(12, 24)
// @include em(12);
@function em($pxval, $base: $em-base) {
@if not unitless($pxval) {
$pxval: strip-units($pxval);
}
@if not unitless($base) {
$base: strip-units($base);
}
@return ($pxval / $base) * 1em;
}
And finally _typography.scss:
// widget table headers
section header h1 {
font-family: LatoRegular;
font-size: em(18);
}
Error from CodeKit:
Syntax error: Undefined variable: "$em-base".
on line 6 of /assets/sass/partials/_typography.scss
from line 38 of /assets/sass/dashboard.scss
$em-base
is not defined in any of your files.