2

I'm currently writing a mixin to easily add multiple fonts in one line. In the mixin I write all the weights I want to use like this:

$font-weights: (
"hairline": 100,
"thin": 200,
"light": 300,
"regular": 400,
"medium": 500,
"semibold": 600,
"bold": 700,
"heavy": 800,
"black": 900,   
);
$main-font: "Lato";
@include font-list($main-font,Hairline Thin Light Regular Medium SemiBold Bold Heavy Black, normal, $font-weights);

The last weight in the list of weights given in the @include is "black", all the links go well, but the mixin I use gives an error on the last value, because it in some way converts "black" automatically before using already to #000000.

Is there any way to make Sass not do this?

the Mixin(s):

@mixin font-include($name, $file, $weight, $type) {
    @include font-face("#{$name}", font-files("#{$file}.woff", "#{$file}.ttf"), "#{$file}.eot", $weight, $type);
}

@mixin font-list($name,$weights,$type,$font-weight){
    @for $i from 1 through length($weights) {       
        @include font-include($name,#{$name}-#{nth($weights,$i)},map-get($font-weight,#{to-lower-case(nth($weights,$i))}),$type);
    }
}

The error given by Compass is:

 $string: #000000 is not a string for `to-lower-case'
Silvester
  • 67
  • 1
  • 6

1 Answers1

0

Fixed it using unquote in the mixin on all weights.

(And added functionality for Italic fonts).

@mixin font-list($name,$weights,$type,$font-weight){
    $italic: '';
    @if $type == 'italic'{  
        $italic: 'Italic';
    }
    @for $i from 1 through length($weights) {   
        $weight: unquote("#{nth($weights,$i)}");
        @include font-include($name,#{$name}-#{nth($weights,$i)}#{$italic},map-get($font-weight,#{to-lower-case($weight)}),$type);
    }
}
Silvester
  • 67
  • 1
  • 6