CODEWITHSUNDEEP
csssass
gespinha
gespinha

Reputation: 8487

SASS font face mixin issue?

I am having some problems processing my SASS. I've got the following SASS

$folder: 'fonts/'

@mixin font-face($family, $filename, $folder, $style, $weight)
  font-family: $family
    src: url('#{$folder}/#{$filename}.eot')
    src: url('#{$folder}/#{$filename}.eot?#iefix') format("embedded-opentype")
    src: url('#{$folder}/#{$filename}.woff') format("woff")
    src: url('#{$folder}/#{$filename}.ttf') format("truetype")
    src: url('#{$folder}/#{$filename}.svg#08bb4ba465a902745fc23c83a5d9fdc2') format("svg")
    font-style: $style
    font-weight: $weight

@include font-face('Abc', 'abc', $folder, normal, 700)

But it returns an error: "Properties are only allowed within rules, directives, mixin includes, or other properties."

Why? Whats wrong?

Here is the CodePen - http://codepen.io/anon/pen/vDJhn

Upvotes: 3

Views: 7995

Answers (2)

Trent Turner
Trent Turner

Reputation: 21

Naturally font-face was on the list. I found this link which I tweaked to produce the following. It allows me to declare the filename once 'MyFontName' and then a useful variable for later use '$custom-font-one'. I hope it helps someone else out there.

@mixin declare-font-face($font-face-family, $font-face-filename, $font-face-weight : normal, $font-face-style :normal) {
  @font-face {
    font-family: '#{$font-face-family}';
    src: url(('#{$font-face-filename}.eot'));
    src: url(('#{$font-face-filename}.eot?#iefix')) format('embedded-opentype'),
    url(('#{$font-face-filename}.woff')) format('woff'),
    url(('#{$font-face-filename}.ttf')) format('truetype'),
    url(('#{$font-face-filename}.svg##{$font-face-family}')) format('svg');
    font-weight: $font-face-weight;
    font-style: $font-face-style;
  }
}
$custom-font-one:'MyFontName';
@include declare-font-face('#{$custom-font-one}', '../includes/fonts/#{$custom-font-one}');

Upvotes: 0

Martin Turjak
Martin Turjak

Reputation: 21224

You need to wrap the properties in a @font-face rule ... eather inside the mixin or when you are including it.

eg. like this: 

@mixin font-face($family, $filename, $folder, $style, $weight)
  @font-face
    font-family: $family
    src: url('#{$folder}/#{$filename}.eot')
    src: url('#{$folder}/#{$filename}.eot?#iefix') format("embedded-opentype")
    src: url('#{$folder}/#{$filename}.woff') format("woff")
    src: url('#{$folder}/#{$filename}.ttf') format("truetype")
    src: url('#{$folder}/#{$filename}.svg#08bb4ba465a902745fc23c83a5d9fdc2') format("svg")
    font-style: $style
    font-weight: $weight

Upvotes: 4

Related Questions