Created
July 10, 2014 16:35
-
-
Save hugobaeta/3048a7d71f2bf84bfb3b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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.9) | |
// Compass (v1.0.0.alpha.20) | |
// ---- | |
// ========================================================================== | |
// Vertical Rhythm and Modular Scale with Baseline Grid by Justin Metros | |
// inspired by www.gridlover.net | |
// ========================================================================== | |
// Sass Exponent Mixin | |
@function exponent($base, $exponent) { | |
$value: $base; | |
@if $exponent > 1 { | |
@for $i from 2 through $exponent { | |
$value: $value * $base; | |
} | |
} | |
@if $exponent < 1 { | |
@for $i from 0 through -$exponent { | |
$value: $value / $base; | |
} | |
} | |
@return $value; | |
} | |
// Rhythm Mixin. Adheres to Baseline Grid. | |
@mixin rhythm($scale, $before: 0, $after: 0) { | |
@if $scale == 0 and $before == 0 and $after == 0 { | |
font-size: $body-font-size; | |
line-height: $body-font-size * $body-line-height; | |
} | |
@else { | |
@if $scale == 0 { | |
font-size: $body-font-size; | |
line-height: $body-font-size * $body-line-height; | |
} | |
@else { | |
$new-font-size: round($body-font-size * exponent($scale-factor, $scale)); | |
font-size: $new-font-size; | |
line-height: ceil($new-font-size / ($body-line-height * $body-font-size)) * $body-line-height * $body-font-size; | |
} | |
margin-top: $body-font-size * $body-line-height * $before; | |
margin-bottom: $body-font-size * $body-line-height * $after; | |
} | |
} | |
// Rhythm Mixin. Margins Only. | |
@mixin margins($before: 0, $after: 0) { | |
margin-top: $body-font-size * $body-line-height * $before; | |
margin-bottom: $body-font-size * $body-line-height * $after; | |
} | |
// Rhythm Mixin. Padding Only. | |
@mixin paddings($before: 0, $after: 0) { | |
padding-top: $body-font-size * $body-line-height * $before; | |
padding-bottom: $body-font-size * $body-line-height * $after; | |
} | |
h1,.alpha { | |
@include rhythm(3, 0, 1); | |
line-height: .8; | |
} |
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
Undefined variable: "$body-font-size". |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment