this question has answer here:
- why sass change format of colors? 2 answers
i'm writing mixin add multiple fonts in 1 line. in mixin write weights want use 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 list of weights given in @include "black", links go well, mixin use gives error on last value, because in way converts "black" automatically before using #000000.
is there way make sass not 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 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 compass is:
$string: #000000 not string `to-lower-case'
fixed using unquote in mixin on weights.
(and added functionality italic fonts).
@mixin font-list($name,$weights,$type,$font-weight){ $italic: ''; @if $type == 'italic'{ $italic: 'italic'; } @for $i 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); } }
Comments
Post a Comment