Created
May 7, 2015 01:58
-
-
Save jackmcpickle/f23b54a235dd0f55e923 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.13) | |
// Compass (v1.0.3) | |
// ---- | |
$used-fonts: (); | |
@mixin import-google-fonts() { | |
$fonts: ""; | |
@each $family, $variations in $used-fonts { | |
// Create url-friendly name (replace space with +): | |
$family-string: str-replace($family, ' ', '+'); | |
// Combine variations into a comma separated string: | |
$variations-string: ""; | |
@each $variation in $variations { | |
$variations-string: "#{$variations-string},#{$variation}"; | |
} | |
// Cut of the first character (unwanted comma): | |
$variations-string: str-slice($variations-string, 2); | |
// Combine family and variatons in $fonts, | |
// separated by a pipe (for the Google URL): | |
$fonts: "#{$fonts}|#{$family-string}:#{$variations-string}"; | |
} | |
// Cut of the first character (unwanted pipe): | |
$fonts: str-slice($fonts, 2); | |
// Import only the used Google fonts! | |
@import url(http://fonts.googleapis.com/css?family=#{$fonts}); | |
} | |
// Source for this str-replace() function: | |
// http://sassmeister.com/gist/1b4f2da5527830088e4d | |
@function str-replace($string, $search, $replace: '') { | |
$index: str-index($string, $search); | |
@if $index { | |
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); | |
} | |
@return $string; | |
} | |
@mixin track-fonts($family, $weight, $style) { | |
// First check if we already knew this one: | |
@if map-has-key($used-fonts, $family) == false { | |
// Font-family isn't in the map yet, so add it. | |
// The key for the nested map is the font name: | |
$used-fonts: map-merge($used-fonts, ($family: ())) !global; | |
} | |
// Now check if this weight and style are known, | |
// using Google's "400italic" notation. | |
// If style is "normal", only use the weight: | |
$weight-style: if($style == normal, $weight, #{$weight}#{$style}); | |
$font-map: map-get($used-fonts, $family); | |
@if index($font-map, $weight-style) == null { | |
// Weight and style aren't in the map yet, so add it: | |
$variations: append($font-map, $weight-style); | |
$used-fonts: map-merge($used-fonts, ($family: $variations)) !global; | |
} | |
} | |
@mixin font($family, $weight: 400, $style: normal) { | |
// Call our custom function to do the heavy lifting: | |
@include track-fonts($family, $weight, $style); | |
font-family: $family; | |
font-weight: $weight; | |
font-style: $style; | |
} | |
.normal { | |
// Regular font-weight (400), normal font-style: | |
@include font("Open Sans"); | |
} | |
.bold { | |
// Bold (weight of 700), normal font-style: | |
@include font("Open Sans", 700); | |
} | |
.semi-bold-italic { | |
// Semi-bold (weight of 600), italic font-style: | |
@include font("Open Sans", 600, italic); | |
} | |
.other-font { | |
// Different font, bold (weight of 700) | |
@include font("PT Serif", 700); | |
} | |
@include import-google-fonts(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600italic|PT+Serif:700); | |
.normal { | |
font-family: "Open Sans"; | |
font-weight: 400; | |
font-style: normal; | |
} | |
.bold { | |
font-family: "Open Sans"; | |
font-weight: 700; | |
font-style: normal; | |
} | |
.semi-bold-italic { | |
font-family: "Open Sans"; | |
font-weight: 600; | |
font-style: italic; | |
} | |
.other-font { | |
font-family: "PT Serif"; | |
font-weight: 700; | |
font-style: normal; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment