Skip to content

Instantly share code, notes, and snippets.

@jakob-e

jakob-e/SassMeister-input.scss

Created May 5, 2015 10:17
Show Gist options
  • Save jakob-e/f00fd9558d66837c2e20 to your computer and use it in GitHub Desktop.
Save jakob-e/f00fd9558d66837c2e20 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
//
// Scope types
//
$SCOPE_TYPE_MASTER: master !default;
$SCOPE_TYPE_MOCK : mock !default;
$SCOPE_TYPE_IE8 : ie8 !default;
$SCOPE_TYPE_IE9 : ie9 !default;
//
// Path types
//
$PATH_TYPE_CSS : css !default;
$PATH_TYPE_URL : url !default;
$PATH_TYPE_IMAGE : img !default;
$PATH_TYPE_FONT : fonts !default;
$PATH_TYPE_ICON : icon !default;
$PATH_TYPE_GRAPHIC: gfx !default;
//
// Breakpoint types
//
$BREAKPOINT_TYPE_PRINT : print !default;
$BREAKPOINT_TYPE_X_SMALL: x-small !default;
$BREAKPOINT_TYPE_SMALL : small !default;
$BREAKPOINT_TYPE_MEDIUM : medium !default;
$BREAKPOINT_TYPE_LARGE : large !default;
$BREAKPOINT_TYPE_X_LARGE: x-large !default;
//
// Align types
//
$ALIGN_TYPE_CENTER: center !default;
$ALIGN_TYPE_LEFT : left !default;
$ALIGN_TYPE_RIGHT : right !default;
$base-paths: (
$PATH_TYPE_URL : '',
$PATH_TYPE_CSS : '',
$PATH_TYPE_IMAGE : '../img/',
$PATH_TYPE_GRAPHIC: '../gfx/',
$PATH_TYPE_FONT : '../fonts/',
) !default;
$base-paths-default: $PATH_TYPE_IMAGE !default;
$PATH_TYPE_FONT:'fonts';
@function base-url($source-name, $base-path-key: $base-paths-default){
@return unquote('url(#{ map-get($base-paths, $base-path-key) }#{$source-name})');
}
@function asset($arglist...){ @return base-url($arglist...); }
@mixin font-face($font-family, $web-font, $weight: 400, $style: normal) {
@font-face {
font-family: '#{$font-family}';
src:base-url('#{$web-font}.eot', $PATH_TYPE_FONT);
src:base-url('#{$web-font}.eot?#iefix', $PATH_TYPE_FONT) format('embedded-opentype'),
base-url('#{$web-font}.woff2', $PATH_TYPE_FONT) format('woff2'),
base-url('#{$web-font}.woff', $PATH_TYPE_FONT) format('woff'),
base-url('#{$web-font}.ttf', $PATH_TYPE_FONT) format('truetype'),
base-url('#{$web-font}.svg##{$font-family}', $PATH_TYPE_FONT) format('svg');
font-weight: $weight;
font-style: $style;
}
}
@mixin gwf($fonts...) {
@if type-of(nth($fonts,1)) == list {
$fonts: nth($fonts,1);
}
$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});
}
$font-context:'';
$fonts:();
@mixin new-font($name, $font, $weight, $style){
@if $font-context == 'web' {
@include font-face($name, $font, $weight, $style);
}
@if $font-context == 'google' {
$fonts:map-merge($fonts, ($name: ($font, $weight, $style))) !global;
}
}
@mixin local-fonts(){
$font-context: 'web' !global;
@content;
}
@mixin google-fonts(){
$font-context: 'google' !global;
@content;
$list:();
@each $key, $value in $fonts {
$list:append($list, $key, comma);
// $args:map-merge($args, )
}
/* #{$list} */
@include gwf($list);
}
//
// Web Fonts
//
@include local-fonts {
@include new-font('Open sans', 'Foo.ttf', 400, normal);
@include new-font('Bar', 'Bar.ttf', 400, normal);
}
@include google-fonts {
@include new-font(Open sans, google, 400, normal);
@include new-font('Bar', google, 400, normal);
@include new-font('Foo', google, 400, normal);
@include new-font('Bar', google, 400, italic);
}
/*
@mixin fonts{@content;}
//fonts.googleapis.com/css?family=
@import url(http://fonts.googleapis.com/css?family=
Oswald:400, 300, 700|
Merriweather:400, 300, 300italic, 900, 700italic, 700, 400italic, 900italic |
Roboto:400, 100, 100italic, 300, 300italic, 400italic, 500, 500italic, 700, 700italic, 900, 900italic
&subset=latin, latin-ext, greek, cyrillic
);
@include fonts {
@include new-font(Oswald, google, 300);
@include new-font(Oswald, google, 400);
@include new-font(Oswald, google, 700);
@include new-font(Merriweather, google, 300);
@include new-font(Merriweather, google, 400);
@include new-font(Merriweather, google, 700);
@include new-font(Merriweather, google, 900);
@include new-font(Merriweather, google, 300, italic);
@include new-font(Merriweather, google, 400, italic);
@include new-font(Merriweather, google, 700, italic);
@include new-font(Merriweather, google, 900, italic);
@include new-font(Roboto, google, 100);
@include new-font(Roboto, google, 300);
@include new-font(Roboto, google, 400);
@include new-font(Roboto, google, 500);
@include new-font(Roboto, google, 700);
@include new-font(Roboto, google, 900);
@include new-font(Roboto, google, 100, italic);
@include new-font(Roboto, google, 300, italic);
@include new-font(Roboto, google, 400, italic);
@include new-font(Roboto, google, 500, italic);
@include new-font(Roboto, google, 700, italic);
@include new-font(Roboto, google, 900, italic);
@include google-font(Oswald, 300);
@include google-font(Oswald, 400);
@include google-font(Oswald, 700);
@include google-font(Merriweather, 300);
@include google-font(Merriweather, 400);
@include google-font(Merriweather, 700);
@include google-font(Merriweather, 900);
@include google-font(Merriweather, 300, italic);
@include google-font(Merriweather, 400, italic);
@include google-font(Merriweather, 700, italic);
@include google-font(Merriweather, 900, italic);
@include google-font(Roboto, 100);
@include google-font(Roboto, 300);
@include google-font(Roboto, 400);
@include google-font(Roboto, 500);
@include google-font(Roboto, 700);
@include google-font(Roboto, 900);
@include google-font(Roboto, 100, italic);
@include google-font(Roboto, 300, italic);
@include google-font(Roboto, 400, italic);
@include google-font(Roboto, 500, italic);
@include google-font(Roboto, 700, italic, latin, latin-ext, greek, cyrillic);
@include google-font(Roboto, 900, italic, 'Lorem ipsum dolor sit amet');
@include new-font(Lato, system, 400);
@include new-font(Lato, 'webfont', 400);
@include new-font(Lato, google, 400);
@include new-font(Lato, google, 400);
@include new-font(Lato, google, 400, italic);
@include new-font(Lato, google, 700, italic);
@include new-font(Lato, google, 900, italic, 'Lorem Ipsum');
}
*/
Raw
SassMeister-output.css
@import url(http://fonts.googleapis.com/css?family=Open+sans|Bar|Foo);
@font-face {
font-family: "Open sans";
src: url(../fonts/Foo.ttf.eot);
src: url(../fonts/Foo.ttf.eot?#iefix) format("embedded-opentype"), url(../fonts/Foo.ttf.woff2) format("woff2"), url(../fonts/Foo.ttf.woff) format("woff"), url(../fonts/Foo.ttf.ttf) format("truetype"), url(../fonts/Foo.ttf.svg#Open sans) format("svg");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Bar";
src: url(../fonts/Bar.ttf.eot);
src: url(../fonts/Bar.ttf.eot?#iefix) format("embedded-opentype"), url(../fonts/Bar.ttf.woff2) format("woff2"), url(../fonts/Bar.ttf.woff) format("woff"), url(../fonts/Bar.ttf.ttf) format("truetype"), url(../fonts/Bar.ttf.svg#Bar) format("svg");
font-weight: 400;
font-style: normal;
}
/* Open sans, Bar, Foo */
/*
@mixin fonts{@content;}
//fonts.googleapis.com/css?family=
@import url(http://fonts.googleapis.com/css?family=
Oswald:400, 300, 700|
Merriweather:400, 300, 300italic, 900, 700italic, 700, 400italic, 900italic |
Roboto:400, 100, 100italic, 300, 300italic, 400italic, 500, 500italic, 700, 700italic, 900, 900italic
&subset=latin, latin-ext, greek, cyrillic
);
@include fonts {
@include new-font(Oswald, google, 300);
@include new-font(Oswald, google, 400);
@include new-font(Oswald, google, 700);
@include new-font(Merriweather, google, 300);
@include new-font(Merriweather, google, 400);
@include new-font(Merriweather, google, 700);
@include new-font(Merriweather, google, 900);
@include new-font(Merriweather, google, 300, italic);
@include new-font(Merriweather, google, 400, italic);
@include new-font(Merriweather, google, 700, italic);
@include new-font(Merriweather, google, 900, italic);
@include new-font(Roboto, google, 100);
@include new-font(Roboto, google, 300);
@include new-font(Roboto, google, 400);
@include new-font(Roboto, google, 500);
@include new-font(Roboto, google, 700);
@include new-font(Roboto, google, 900);
@include new-font(Roboto, google, 100, italic);
@include new-font(Roboto, google, 300, italic);
@include new-font(Roboto, google, 400, italic);
@include new-font(Roboto, google, 500, italic);
@include new-font(Roboto, google, 700, italic);
@include new-font(Roboto, google, 900, italic);
@include google-font(Oswald, 300);
@include google-font(Oswald, 400);
@include google-font(Oswald, 700);
@include google-font(Merriweather, 300);
@include google-font(Merriweather, 400);
@include google-font(Merriweather, 700);
@include google-font(Merriweather, 900);
@include google-font(Merriweather, 300, italic);
@include google-font(Merriweather, 400, italic);
@include google-font(Merriweather, 700, italic);
@include google-font(Merriweather, 900, italic);
@include google-font(Roboto, 100);
@include google-font(Roboto, 300);
@include google-font(Roboto, 400);
@include google-font(Roboto, 500);
@include google-font(Roboto, 700);
@include google-font(Roboto, 900);
@include google-font(Roboto, 100, italic);
@include google-font(Roboto, 300, italic);
@include google-font(Roboto, 400, italic);
@include google-font(Roboto, 500, italic);
@include google-font(Roboto, 700, italic, latin, latin-ext, greek, cyrillic);
@include google-font(Roboto, 900, italic, 'Lorem ipsum dolor sit amet');
@include new-font(Lato, system, 400);
@include new-font(Lato, 'webfont', 400);
@include new-font(Lato, google, 400);
@include new-font(Lato, google, 400);
@include new-font(Lato, google, 400, italic);
@include new-font(Lato, google, 700, italic);
@include new-font(Lato, google, 900, italic, 'Lorem Ipsum');
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment