Google Fonts Sass Mixin

给大家分享一个codepen上的调用谷歌Web Font的mixin，以此为例我们继续学习SASS。

使用google web font

1.到google font寻找你需要的字体，https://www.google.com/fonts，例如我们需要一种字体，Vampiro One

2.引入字体文件，

<link href='http://fonts.googleapis.com/css?family=Vampiro+One' rel='stylesheet' type='text/css'>

3.使用该字体，font-family: 'Vampiro One', cursive;

当我们需要多种字体的时候，例如我们需要“Ubuntu Mono”，“Inconsolata”，“Vampiro One”三种字体，那么引入文件如下

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono|Inconsolata|Vampiro+One' rel='stylesheet' type='text/css'>

定义Mixin

@mixin gwf($fonts) {
  $url: "http://fonts.googleapis.com/css?family=";
  $nb: 0;
  
  @each $font-name in $fonts {
    $nb: $nb + 1;
    $nb-word: 0;
    
    @each $word in $font-name {
      $nb-word: $nb-word + 1;
      $url: $url + $word;
      
      @if $nb-word < length($font-name) {
        $url: $url + "+"; 
      } 
    }
    
    @if $nb < length($fonts) {
       $url: $url + "|"; 
    }
  }
  
  @import url(#{$url});
}

使用Mixin

$fonts: Kavoon, Wendy One, Bonbon;
@include gwf($fonts);

.first { 
  font-family: Kavoon;
}
.second {
  font-family: Wendy One;
}

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------