Skip to content

Instantly share code, notes, and snippets.

@jensgro

jensgro/input.scss

Created April 26, 2023 13:46
Show Gist options
  • Save jensgro/4cb1f3e54fb41c12602fc545f72c1604 to your computer and use it in GitHub Desktop.
Save jensgro/4cb1f3e54fb41c12602fc545f72c1604 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
$fonts: (
Thin: 100,
ThinItalic: 100,
ExtraLight: 200,
ExtraLightItalic: 200,
Light: 300,
LightItalic: 300,
Regular: 400,
Italic: 400,
Medium: 500,
MediumItalic: 500,
SemiBold: 600,
SemiBoldItalic: 600,
Bold: 700,
BoldItalic: 700,
ExtraBold: 800,
ExtraBoldItalic: 800,
Black: 900,
BlackItalic: 900
);
/*
SWR_Sans_WEB: ( ),
SWR_Slab_WEB: (),
SWR_text_WEB: (),
SWR_VAR_WEB: ();
Thin, 100,
ThinItalic 100,
ExtraLight, 200,
ExtraLightItalic, 200,
Light, 300,
LightItalic, 300,
Regular, 400,
Italic, 400,
Medium, 500
MediumItalic, 500,
SemiBold, 600,
SemiBoldItalic, 600
Bold, 700,
BoldItalic, 700,
ExtraBold, 800,
ExtraBoldItalic, 800,
Black, 900,
BlackItalic, 900
*/
@mixin font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff) {
//$src: null;
$src: local(""+$name+"");
@each $ext in $exts {
$src: append($src, url(quote($path + "." + $ext)) format(quote($ext)), comma);
}
@font-face {
font-family: quote($name);
font-style: $style;
font-weight: $weight;
font-display: swap;
src: $src;
}
}
@mixin ff($name, $map, $path: null) {
@each $file, $weight in $map {
$filename: "../fonts/swr_type/"+$path+"/"+$name+"-"+$file;
@include font-face($name, $filename, $weight );
}
}
@include font-face(One, fonts/one);
@font-face {
font-family:'Roboto';
font-style: normal;
font-weight: 400;
src:
local('Roboto'), // Erst nachsehen, ob die Schrift
local('Roboto-Regular'), // beim Besucher schon installiert ist
url(fonts/roboto-v18-latin-regular.woff2) format('woff2'), // Wenn nicht, wird die Schrift vom Webserver geladen
url(fonts/roboto-v18-latin-regular.woff) format('woff'); // Am Ende das Schlusslicht für IE11
}
@include ff("SWRSans", $fonts, $path: "SWR_Sans_WEB");
Raw
output.css
@font-face {
font-family: "One";
font-display: swap;
src: local("One"), url("fonts/one.woff2") format("woff2"), url("fonts/one.woff") format("woff");
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
src: local("Roboto"), local("Roboto-Regular"), url(fonts/roboto-v18-latin-regular.woff2) format("woff2"), url(fonts/roboto-v18-latin-regular.woff) format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 100;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Thin.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Thin.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 100;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-ThinItalic.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-ThinItalic.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 200;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-ExtraLight.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-ExtraLight.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 200;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-ExtraLightItalic.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-ExtraLightItalic.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 300;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Light.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Light.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 300;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-LightItalic.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-LightItalic.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 400;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Regular.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Regular.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 400;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Italic.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Italic.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 500;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Medium.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Medium.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 500;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-MediumItalic.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-MediumItalic.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 600;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-SemiBold.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-SemiBold.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 600;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-SemiBoldItalic.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-SemiBoldItalic.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 700;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Bold.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Bold.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 700;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-BoldItalic.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-BoldItalic.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 800;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-ExtraBold.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-ExtraBold.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 800;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-ExtraBoldItalic.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-ExtraBoldItalic.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 900;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Black.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-Black.woff") format("woff");
}
@font-face {
font-family: "SWRSans";
font-weight: 900;
font-display: swap;
src: local("SWRSans"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-BlackItalic.woff2") format("woff2"), url("../fonts/swr_type/SWR_Sans_WEB/SWRSans-BlackItalic.woff") format("woff");
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment