Skip to content

Instantly share code, notes, and snippets.

@halofx
Last active February 16, 2016 00:15
Show Gist options
  • Select an option

  • Save halofx/b8fa1223d8b6ad858b79 to your computer and use it in GitHub Desktop.

Select an option

Save halofx/b8fa1223d8b6ad858b79 to your computer and use it in GitHub Desktop.
Sass Map Font Stack
// ----
// libsass (v3.2.5)
// ----
$font-stack:
(group: lato, id: light, font: ('Lato', san-serif ), weight: 300, style: normal),
(group: lato, id: light-italic, font: ('Lato', san-serif ), weight: 300, style: italic),
(group: lato, id: regular, font: ('Lato', san-serif), weight: 400, style: normal),
(group: lato, id: regular-italic, font: ('Lato', san-serif), weight: 400, style: italic),
(group: lato, id: bold, font: ('Lato', san-serif), weight: 700, style: normal),
(group: lato, id: bold-italic, font: ('Lato', san-serif), weight: 400, style: italic),
(group: roboto, id: regular, font: ('Roboto', serif), weight: 200, style: normal),
(group: code, id: regular, font: (monospace), weight: 400, style: normal);
// Breakpoint Mixin
@mixin font($group, $id:regular){
@each $font in $font-stack{
@if($group == map-get($font, group) and $id == map-get($font, id)){
font-family: map-get($font, font);
font-weight: map-get($font, weight);
font-style: map-get($font, style);
}
}
}
h1{
@include font(lato, light-italic);
}
p{
@include font(lato);
}
p i{
@include font(lato, regular-italic);
}
p b{
@include font(lato, bold);
}
blockquote{
@include font(roboto);
}
code{
@include font(code);
}
h1 {
font-family: "Lato", san-serif;
font-weight: 300;
font-style: italic;
}
p {
font-family: "Lato", san-serif;
font-weight: 400;
font-style: normal;
}
p i {
font-family: "Lato", san-serif;
font-weight: 400;
font-style: italic;
}
p b {
font-family: "Lato", san-serif;
font-weight: 700;
font-style: normal;
}
blockquote {
font-family: "Roboto", serif;
font-weight: 200;
font-style: normal;
}
code {
font-family: monospace;
font-weight: 400;
font-style: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment