Created
May 4, 2015 20:28
-
-
Save jakob-e/6c0ea42d3ba9aced8f60 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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) | |
// ---- | |
// _________________________________________________________________ | |
// | |
// Gonfig | |
// | |
// _________________________________________________________________ | |
// | |
// To provide flexibility google-font can be set to handle multiple | |
// fonts, weights and styles in one include. This does not affect | |
// the output compared with individual includes (recommended). | |
// | |
// You can en-/disable each feature individually. | |
// Be aware of output as all combinations will be added to the import. | |
// Also note that when multi-fonts is enabled all multi word font names | |
// like Open Sans must be quoted 'Open Sans' | |
// | |
// By default only multiple weights are allowed as it is what | |
// is most likely to be used and does not cause unforseen | |
// output combinations (and heavy load) | |
// | |
// @import google-font(Open Sans, 300 400 600); | |
// @import google-font(Open Sans, 300 400 600, italic); | |
// | |
$google-font-enable-multi-fonts : false !default; | |
$google-font-enable-multi-weights: true !default; | |
$google-font-enable-multi-styles : false !default; | |
// | |
// To ease the job of handling subsets it is recommended you use the | |
// $google-font-subsets map. Simply switch the value to true and the | |
// subset will be added to all your imports | |
// | |
$google-font-subsets: ( | |
'arabic' :false | |
, 'cyrillic' :false | |
, 'cyrillic-ext':false | |
, 'devanagari' :false | |
, 'greek' :false | |
, 'greek-ext' :false | |
, 'hebrew' :false | |
, 'khmer' :false | |
, 'latin' :false | |
, 'latin-ext' :false | |
, 'telugu' :false | |
, 'vietnamese' :false | |
) !default; | |
@mixin google-font($name: null, $weight: 400, $style: normal, $text: null, $subset: null){ | |
$URL : '//fonts.googleapis.com/css?family='; | |
$_name : (); | |
$_weight: (); | |
$_style : (); | |
$_subset: (); | |
// _________________________________________________________________ | |
// | |
// Import or add to font list | |
// | |
// _________________________________________________________________ | |
@if $name { | |
@if $google-font-enable-multi-fonts == false { $name: inspect(unquote($name)); } | |
@if $google-font-enable-multi-weights == false and type-of($weight) == list { $weight: nth($weight, 1); } | |
@if $google-font-enable-multi-styles == false and type-of($style) == list { $style : nth($style, 1); } | |
@if type-of($name) == string { $_name : append((), $name, comma); } | |
@if type-of($name) == list { $_name : join((), $name, comma); } | |
@if type-of($weight) == number { $_weight: append((), $weight, comma); } | |
@if type-of($weight) == list { $_weight: join((), $weight, comma); } | |
@if type-of($style) == string { $_style : append((), $style, comma); } | |
@if type-of($style) == list { $_style : join((), $style, comma); } | |
@if type-of($subset) == string { $_subset: append((), $subset, comma); } | |
@if type-of($subset) == list { $_subset: join((), $subset, comma); } | |
// ------------------------------------------------ | |
// Name | |
// ------------------------------------------------ | |
// Replace spaces in font name with + and | |
// remove duplicates | |
// | |
$_temp: (); | |
@for $i from 1 through length($_name){ | |
$_temp: append($_temp, __gf-str-replace(#{unquote(nth($_name, $i))},' ','+'), comma) | |
} | |
$_name: __gf-list-unique($_temp); | |
// ------------------------------------------------ | |
// Weight and style | |
// ------------------------------------------------ | |
// Add default weight and style if null | |
// Concatinate weight and style if needed | |
// Remove duplicates | |
// | |
$_weight: if(length($_weight)>0, $_weight, (400)); | |
$_style : if(length($_style)>0, $_style, (normal)); | |
$_temp: (); | |
@for $i from 1 through length($_weight){ | |
@for $j from 1 through length($_style){ | |
$w: nth($_weight, $i); $s: nth($_style, $j); | |
$_temp: append($_temp, if($s == normal, $w, unquote($w+$s)), comma); | |
} | |
} | |
$_weight: __gf-list-unique($_temp); | |
// ------------------------------------------------ | |
// Subsets | |
// ------------------------------------------------ | |
// Add enabled subsets and remove diplicates | |
// if we are not requesting an optimized font | |
// | |
$_temp:(); | |
@if length($_subset) > 0 { | |
@for $i from 1 through length($_subset){ | |
$_temp: append($_temp, unquote(nth($_subset, $i)), comma); | |
} | |
} | |
@each $key, $value in $google-font-subsets { | |
@if $value { $_temp: append($_temp, unquote($key), comma); } | |
} | |
$_subset: __gf-list-unique($_temp); | |
// ------------------------------------------------ | |
// Text | |
// ------------------------------------------------ | |
// Remove duplicate characters and encode | |
// | |
@if $text { | |
$encode:('!':'%21','#':'%23','$':'%24','&':'%26','\'':'%27', | |
'(':'%28',')':'%29','*':'%2A','+':'%2B',',':'%2C', | |
'/':'%2F',':':'%3A',';':'%3B','=':'%3D','?':'%3F', | |
'@':'%40','[':'%5B',']':'%5D',' ':'%20'); | |
$chars : __gf-list-unique(__gf-list-explode($text)); | |
$text: ''; | |
@for $i from 1 through length($chars){ | |
$replace: map-get($encode, nth($chars,$i)); | |
$text: $text + if($replace, $replace, nth($chars,$i)); | |
} | |
} | |
// ------------------------------------------------ | |
// Create single import query | |
// ------------------------------------------------ | |
@if $__gf-combine == false or $text { | |
$query:''; | |
@for $i from 1 through length($_name){ | |
$query: #{$query}#{if($i > 1,'|','')}; | |
$query: #{$query}#{nth($_name, $i)}; | |
$query: #{$query}#{':'+$_weight}; | |
} | |
// We don't need subset when passing text | |
@if not $text { | |
$query: #{$query}#{if(length($_subset) > 1,#{'&subset='+$_subset},'')}; | |
} @else { | |
$query: #{$query}#{'&text='+$text}; | |
} | |
// Remove spaces | |
$query: __gf-str-replace($query, ' ',''); | |
// Create single import | |
@import url(#{$URL}#{$query}); | |
} | |
// ------------------------------------------------ | |
// Push to font list to combine | |
// ------------------------------------------------ | |
@else { | |
@for $i from 1 through length($_name){ | |
$__gf-list: append($__gf-list, (name: nth($_name, $i), weight:$_weight, subset: $_subset), comma) !global; | |
} | |
} | |
} | |
// _________________________________________________________________ | |
// | |
// Combined import | |
// | |
// _________________________________________________________________ | |
@else { | |
// ------------------------------------------------ | |
// Set combine marker and include nested | |
// content (now in a combine syntax) | |
// ------------------------------------------------ | |
$__gf-combine: true !global; | |
@content; | |
// ------------------------------------------------ | |
// Loop throug each item in the font list and | |
// merge values with already mapped values | |
// ------------------------------------------------ | |
// Map to hold combined fonts | |
$combine-map:(); | |
@for $i from 1 through length($__gf-list){ | |
$font : nth($__gf-list, $i); | |
$name : map-get($font, name); | |
$mapped: map-get($combine-map, to-lower-case($name)); | |
$_weight: join(if($mapped,map-get($mapped, weight),()), map-get($font, weight), comma); | |
$_subset: join(if($mapped,map-get($mapped, subset),()), map-get($font, subset), comma); | |
$combine-map: map-merge($combine-map, (to-lower-case($name):(name: $name, weight: __gf-list-unique($_weight), subset: __gf-list-unique($_subset)))); | |
} | |
// ------------------------------------------------ | |
// Create combined import query | |
// ------------------------------------------------ | |
$query:''; | |
$subsets:(); | |
@each $key, $font in $combine-map { | |
$_name : map-get($font, name); | |
$_weight: map-get($font, weight); | |
$_subset: map-get($font, subset); | |
$query: #{$query}#{if($query != '', '|', '')}; | |
$query: #{$query}#{$_name}; | |
$query: #{$query}#{':'+$_weight}; | |
$subsets: join($subsets, $_subset, comma); | |
} | |
// Remove redundant subsets and spaces | |
$subsets: __gf-list-unique($subsets); | |
$query: #{$query}#{if(length($subsets)>0, '&subset='+$subsets, '')}; | |
$query: __gf-str-replace($query, ' ',''); | |
// Create combined import | |
@import url(#{$URL}#{$query}); | |
// ------------------------------------------------ | |
// Reset combine marker and enpty font list | |
// ------------------------------------------------ | |
$__gf-combine: false !global; | |
$__gf-list: () !global; | |
} | |
} | |
// Variables for internal use | |
$__gf-list:(); | |
$__gf-combine: false; | |
// Helper functions (SassyLists ripoff) | |
@function ___gf-list-to-list($value, $separator: list-separator($value)) { @if type-of($value) != "list" or list-separator($value) != $separator { $new-list: if($separator == "comma", sl-comma-list(), ()); @each $item in $value { $new-list: append($new-list, $item, $separator); } @return $new-list; } @return $value; } | |
@function ___gf-list-unique($list) { $result: (); @each $item in $list { @if not index($result, $item) { $result: append($result, $item, list-separator($list)); }} @return ___gf-list-to-list($result); } | |
@function ___gf-list-explode($string, $delimiter: '', $separator: "space") { $result: (); $length: str-length($string); @if not index("space" "comma", $separator) { $separator: "space"; }@if str-length($delimiter) == 0 {@for $i from 1 through $length { $result: append($result, str-slice($string, $i, $i)); } @return $result; } $running: true; $remaining: $string; @while $running { $index: str-index($remaining, $delimiter); @if not $index { $running: false; } @else { $slice: str-slice($remaining, 1, $index - 1); $result: append($result, $slice, $separator); $remaining: str-slice($remaining, $index + str-length($delimiter)); } } @return append($result, $remaining, $separator); } | |
// Map helper functions | |
// If SassyLists are imported we use the real thing | |
@function __gf-str-replace($string, $search, $replace: '') {$index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + __gf-str-replace(str-slice($string, $index + str-length($search)), $search, $replace); }@return $string; } | |
@function __gf-list-unique($arglist...) { @return if(function-exists(sl-remove-duplicates), sl-remove-duplicates($arglist...), ___gf-list-unique($arglist...)); } | |
@function __gf-list-explode($arglist...){ @return if(function-exists(sl-explode), sl-explode($arglist...), ___gf-list-explode($arglist...)); } | |
$google-font-enable-multi-fonts : true; | |
$google-font-enable-multi-weights: true; | |
$google-font-enable-multi-styles : true; | |
$google-font-subsets: ( | |
'arabic' :false | |
, 'cyrillic' :false | |
, 'cyrillic-ext':false | |
, 'devanagari' :false | |
, 'greek' :false | |
, 'greek-ext' :false | |
, 'hebrew' :false | |
, 'khmer' :false | |
, 'latin' :false | |
, 'latin-ext' :false | |
, 'telugu' :false | |
, 'vietnamese' :false | |
); | |
@include google-font { | |
@include google-font('Open Sans' 'Lato', 300 400, italic normal); | |
@include google-font('Open Sans' 'Lato', 600, italic, 'Lorem ipsum dolor sit amet!'); | |
//@include gf(Lato); | |
//@include gf(Lato2, 300); | |
//@include gf(Open Sans, 800, $subset: arabic); | |
//@include gf(Lato2, 900); | |
//@include gf(Lato); | |
//@include gf('Open Sans' 'Lato', 300 400, 'normal' 'italic'); | |
//@include gf(NOSTYLE, 300 400, null, 'latin'); | |
//@include gf((Open Sans, Lato), 300 400, normal oblique normal italic, 'latin', 'Lorem ipsum dolor sit amet'); | |
//@include gf($name: 'Open Sans'); | |
//@include gf('Open Sans'); | |
} | |
This file contains hidden or 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(//fonts.googleapis.com/css?family=Open+Sans:600italic|Lato:600italic&text=Lorem%20ipsudlta%21); | |
@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400|Lato:300italic,300,400italic,400); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment