Last active
August 29, 2015 14:04
-
-
Save lucalanca/25606f286f5ad61341a8 to your computer and use it in GitHub Desktop.
Font specs in Sass using maps
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.3.10) | |
// Compass (v1.0.0.alpha.20) | |
// ---- | |
// ---------------------- | |
// HELPER FUNCTIONS HERE | |
// ---------------------- | |
@function size($multiplier) { | |
@return map-get($base, font-size) * $multiplier; | |
} | |
@function line-height($size) { | |
@return $size * map-get($base, base-multiplier); | |
} | |
@function font-family($name) { | |
$desiredFont: map-get(map-get($font-families, $name), name); | |
$fallbackFont: map-get(map-get($font-families, $name), fallback); | |
@return #{ $desiredFont + ", " + $fallbackFont}; | |
} | |
@function font-weight($name) { | |
@return map-get(map-get($font-families, $name), weight); | |
} | |
// ------------------------------- | |
// How to use this: | |
// | |
// h1 { @extend .title; } | |
// h2 { @extend .heading; } | |
// p { @extend .base; } | |
// --------------------------------- | |
// ------------------------------- | |
// Define site settings here: | |
// base | |
// font-families | |
// font specs | |
//--------------------------------- | |
$base: ( | |
font-size: 1rem, | |
base-multiplier: 1.5, | |
unit: 1rem * 1.5, // font * base-multiplier | |
font-family: "Avenir Roman" | |
); | |
$font-families: ( | |
avenir-roman: ( | |
name: "Avenir Roman", | |
weight: 300, | |
filename: "yeahhh", | |
fallback: unquote("Arial, serif") | |
), | |
avenir-heavy: ( | |
name: "Avenir Heavy", | |
weight: 700, | |
filename: "foooo", | |
fallback: unquote("Arial, serif") | |
) | |
); | |
$fonts: ( | |
base: ( | |
size: size(1), | |
family: avenir-roman | |
), | |
title: ( | |
size: size(4), | |
family: avenir-heavy | |
), | |
heading: ( | |
size: size(3), | |
family: avenir-heavy | |
) | |
); | |
// ----------------------------------- | |
// This generate classes for each for spec | |
// ----------------------------------- | |
@each $font-name, $font-spec in $fonts { | |
$size: map-get($font-spec, size); | |
$family: map-get($font-spec, family); | |
.#{$font-name} { | |
font-size: $size; | |
line-height: line-height($size); | |
font-family: font-family($family); | |
font-weight: font-weight($family); | |
} | |
} | |
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
.base { | |
font-size: 1rem; | |
line-height: 1.5rem; | |
font-family: Avenir Roman, Arial, serif; | |
font-weight: 300; | |
} | |
.title { | |
font-size: 4rem; | |
line-height: 6rem; | |
font-family: Avenir Heavy, Arial, serif; | |
font-weight: 700; | |
} | |
.heading { | |
font-size: 3rem; | |
line-height: 4.5rem; | |
font-family: Avenir Heavy, Arial, serif; | |
font-weight: 700; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment