Skip to content

Instantly share code, notes, and snippets.

@craigmdennis craigmdennis/_debug.scss
Last active Jan 16, 2018

Embed
What would you like to do?
Sass mixins for vertical rhythm and scoped typography with pixel fallback for IE.
$debug-rhythm: false;
// Generate the margins and line-height
@mixin rhythm($margins: false) {
@each $name, $size in $scale {
$rhythm: $measure * ($line-height / $size);
// Reduce the line-height to base line-height
// if the rhythm is greater
@if ($rhythm > $line-height) {
$rhythm: $line-height;
}
// Increase the line-height if the rhythm is less than 1
// Might break vertical rhythm but looks better visually
@if ($rhythm < 1) {
$rhythm: 1;
}
// Generate classes dynamically
.#{$name} {
// Margins and line-height are to allow
// scoping within different .context__* classes
@if ($margins == true) {
// Use REM function to provide IE fallback
margin-bottom: rem($rhythm * $font-base);
line-height: $rhythm;
}
@else {
line-height: $rhythm;
}
}
}
}
// Generate the font sizes
@mixin scale() {
@each $name, $size in $scale {
.#{$name} {
font-size: rem($size);
text-rendering: optimizeLegibility;
}
}
}
// Generate the font weights
@mixin weight() {
@each $name, $value in $weight {
.#{$name} {
font-weight: $value;
}
}
}
// Extend scale to root headings
@mixin headings() {
@each $h, $size in $headings {
#{$h} {
@extend .#{$size};
}
}
}
// Generate classes using mixins
@include scale;
@include headings;
@include weight;
// Add a context just for maintaining rhythm with line-height and no margins
.context__rhythm {
// Use a lined background to test the rhythm
@if ($debug-rhythm == true) {
background-image: url(http://basehold.it/i/#{$measure}); // 18px * 1.5
}
// Generate the line-height
@include rhythm;
}
// Add a context just for adding margins but only
// allow it to be used when we're already maintain a rhythm with line-heights
.context__rhythm {
.context__margins,
&.context__margins {
@include rhythm(true);
ul,ol,dl,blockquote,p,pre,iframe,
.gallery__thumb {
margin-bottom: $baseline;
}
}
}
// Add typographical flare and bullets
// Nothing within should add margins
.context__copy {
ul {
list-style: disc;
margin-left: $baseline;
}
}
// PX to REM Calculator
@function rem($size) {
// Return pixels if IE
@if ($old-ie == true) {
@return $size *1px;
}
// Otherwise use REMS
@else {
@return ($size / $font-base) * 1rem;
}
}
$old-ie: false;
$line-height: 1.5;
$font-size: 112.5; // percentage value (16 * 112.5% = 18px)
$font-base: 16 * ($font-size/100);
$measure: $font-base * $line-height;
// Use modularscale.com to generate a list of font-sizes
$scale: (
tera: 91,
giga: 72,
mega: 60,
alpha: 48,
bravo: 40,
charlie: 32,
delta: 24,
echo: 21,
foxtrot: 18,
golf: 14,
hotel: 12
);
// Assign sizes to elements
$headings: (
h1: mega,
h2: alpha,
h3: bravo,
h4: charlie,
h5: delta,
h6: echo
);
// Class names => weights
$weight: (
light: 300,
normal: 400,
semi-bold: 600,
bold: 700,
ultra-bold: 900
);
// Compile this stylesheet as well as styles.scss and include with IE conditional comments
// Use pixels
$old-ie: true;
// Import the normal stylsheet but it will contain different rules
// becuase of the $old-ie flag set as `true` in this stylesheet.
@import "style";
@import "vars";
@import "utilities";
@import "mixins";
@import "type";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.