Skip to content

Instantly share code, notes, and snippets.

@lucalanca
Last active August 29, 2015 14:04
Show Gist options
  • Save lucalanca/25606f286f5ad61341a8 to your computer and use it in GitHub Desktop.
Save lucalanca/25606f286f5ad61341a8 to your computer and use it in GitHub Desktop.
Font specs in Sass using maps
// ----
// 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);
}
}
.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