I am in the process of developing a mixin that simplifies the task of incorporating multiple fonts in a single line. Within the mixin, I specify the desired font weights as follows:
$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);
When I include the last weight "black" in the @include statement, everything seems to be working fine. However, an error occurs with this particular value, as Sass automatically converts it to #000000 before processing it. Is there a way to prevent Sass from doing this?
Here are the Mixins being used:
@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 message from Compass reads:
$string: #000000 is not a string for `to-lower-case'