CODEWITHSUNDEEP
cssvariablessassfont-face
Steve Sanders
Steve Sanders

Reputation: 8651

Output a variable with a SASS mixin

I am trying to do something along the lines of:

@mixin raleway() {
    @include font-face("ralewayregular", font-files("raleway/raleway-regular-webfont.woff", "raleway/raleway-regular-webfont.ttf", "raleway/raleway-regular-webfont.svg"), "raleway/raleway-regular-webfont.eot");
    $raleway: "ralewayregular", Arial, sans-serif;
}

Then, to use the mixin:

@include raleway();

body {
    font: 16px $raleway;
}

But, I am getting a Undefined variable: "$raleway". error when I try to compile. It looks like the mixin does not make the variable available, does anyone know if this is possible in SASS?

Upvotes: 1

Views: 726

Answers (1)

ian
ian

Reputation: 244

Nico O pretty much says it in his comment, but her's an example. Put the following code near the top of your file:

@include font-face("ralewayregular", font-files("raleway/raleway-regular-webfont.woff", "raleway/raleway-regular-webfont.ttf", "raleway/raleway-regular-webfont.svg"), "raleway/raleway-regular-webfont.eot");
$raleway: "ralewayregular", Arial, sans-serif;

Then later in the file when you want to use the font:

body { font: 16px $raleway; }

Check out this link if you want to read up on variable scope in Sass. Hope this helps.

Upvotes: 1

Related Questions