Created
October 13, 2014 15:53
-
-
Save Undistraction/3a3bcc2ca2386f15051f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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.4.5) | |
// Compass (v1.0.1) | |
// ---- | |
// Vars | |
// ------------------------------------------------------------------------------------------------- | |
/** | |
* Default font size for all text in pixels | |
*/ | |
$rhythm-base-font-size: 16px !default; | |
/** | |
* Distance between text baselines in pixels. | |
*/ | |
$rhythm-base-line-height: 21px !default; | |
/** | |
* The length unit in which to output rhythm values. Supported values: px, em, rem. | |
* Percent units can't be used since they make calculating padding and margins impractical, | |
* and percentage borders are not valid or supported in css. | |
*/ | |
$rhythm-unit: rem !default; | |
/** | |
* Allows the `adjust-font-size-to` mixin and the `rhythm-lines-for-font-size` function | |
* to round the line height to the nearest half line height instead of the | |
* nearest integral line height to avoid large spacing between lines. | |
*/ | |
$rhythm-round-to-nearest-half-line: false !default; | |
/** | |
* Ensure minimum leading above / below text. Number of lines will be increased if necessary. | |
*/ | |
$rhythm-min-line-leading: 2px !default; | |
/** | |
* Establish a rhythm throughout the document using a font-size and line-height. | |
* | |
* @param {Number} $font-size ($rhythm-base-font-size) | |
* The font-size to use as base | |
* | |
* @output | |
* Render html element with `font-size` and `line-height` set. | |
*/ | |
// Default font-size for all browsers | |
$rhythm-browser-default-font-size: 16px; | |
// The leader is the amount of whitespace in a line. | |
// It might be useful in your calculations. | |
$rhythm-base-leading: convert-length($rhythm-base-line-height - $rhythm-base-font-size, $rhythm-unit, $rhythm-base-font-size); | |
// The half-leader is the amount of whitespace above and below a line. | |
// It might be useful in your calculations. | |
$rhythm-base-half-leader: $rhythm-base-leading / 2; | |
// @private Whether the rhythm output is in absolute units (px) or not (em, rem) | |
$rhythm-relative-font-sizing: if($rhythm-unit == px, false, true); | |
$rhythm-invalid-value-error: "Invalid Value Error"; | |
$rhythm-invalid-unit-error: "Invalid Unit Error"; | |
$rhythm-last-error: null; | |
$rhythm-under-test: false; | |
$rhythm-error-thrown: false; | |
// Support | |
// ------------------------------------------------------------------------------------------------- | |
@function rhythm-throw-error($error, $message) { | |
@if $rhythm-under-test { | |
@if not $rhythm-error-thrown { | |
$rhythm-error-thrown: true !global; | |
$rhythm-last-error: $error !global; | |
} | |
} @else { | |
@error "#{$error} #{$message}"; | |
} | |
@return null; | |
} | |
@function rhythm-validate($font-size, $line-height) { | |
// Validate units | |
@if unit($font-size) != 'px' { | |
$error: rhythm-throw-error($rhythm-invalid-unit-error, "$rhythm-base-font-size must resolve to a pixel unit."); | |
} | |
@if unit($line-height) != 'px' { | |
$error: rhythm-throw-error($rhythm-invalid-unit-error, "$rhythm-base-line-height must resolve to a pixel unit."); | |
} | |
@if $rhythm-unit != 'px' and $rhythm-unit != 'em' and $rhythm-unit != 'rem' { | |
$error: rhythm-throw-error($rhythm-invalid-unit-error, "$rhythm-unit must be `px`, `em` or `rem`."); | |
} | |
@return null; | |
} | |
// Calculate rhythm units. | |
@function rhythm($lines: 1, $font-size: $rhythm-base-font-size, $offset: 0) { | |
@if type-of($lines) != number { | |
$lines: rhythm-parse-value-filter($lines); | |
} | |
$rhythm: convert-length($lines * $rhythm-base-line-height - $offset, $rhythm-unit, $font-size); | |
@if unit($rhythm) == px { | |
$rhythm: floor($rhythm); | |
} | |
@return $rhythm; | |
} | |
// Calculate the minimum multiple of rhythm units needed to contain the font-size. | |
@function rhythm-lines-for-font-size($font-size) { | |
$lines: if($rhythm-round-to-nearest-half-line, | |
ceil(2 * $font-size / $rhythm-base-line-height) / 2, | |
ceil($font-size / $rhythm-base-line-height)); | |
// If lines are cramped include some extra lead. | |
@if ($lines * $rhythm-base-line-height - $font-size) < ($rhythm-min-line-leading * 2) { | |
$lines: $lines + if($rhythm-round-to-nearest-half-line, 0.5, 1); | |
} | |
@return $lines; | |
} | |
@function rhythm-process-base-values($font-size, $line-height) { | |
// Error if invalid | |
$is-valid: rhythm-validate($font-size, $line-height); | |
@if $rhythm-relative-font-sizing { | |
// Adjust font size if base font-size different from default browser (16px) | |
$font-size: 100% * ($font-size / $rhythm-browser-default-font-size); | |
// Use ems instead of rems to avoid Webkit bug. Usage of rems is uneffected as they will use the | |
// em value of the html element. | |
$line-height: rhythm-convert-length($line-height, em); | |
} @else { | |
// ( Use given font-size ) | |
$line-height: round(line-height); | |
} | |
@return ($font-size $line-height); | |
} | |
// Convert any CSS <length> or <percentage> value to any another. | |
// | |
// @param $length | |
// A css <length> or <percentage> value | |
// | |
// @param $to-unit | |
// String matching a css unit keyword, e.g. 'em', '%', etc. | |
// | |
// @param $from-context | |
// When converting from relative units, the absolute length (in px) to | |
// which $length refers (e.g. for $lengths in em units, would normally be the | |
// font-size of the current element). | |
// | |
// @param $to-context | |
// For converting to relative units, the absolute length in px to which the | |
// output value will refer. Defaults to the same as $from-context, since it is | |
// rarely needed. | |
@function rhythm-convert-length( | |
$length, | |
$to-unit, | |
$from-context: $rhythm-base-font-size, | |
$to-context: $from-context | |
) { | |
$from-unit: unit($length); | |
// Optimize for cases where `from` and `to` units are accidentally the same. | |
@if $from-unit == $to-unit { @return $length; } | |
// Context values must be in px so we can determine a conversion ratio for | |
// relative units. | |
@if unit($from-context) != 'px' { | |
$error: rhythm-throw-error($rhythm-invalid-unit-error, "Parameter $from-context must resolve to a value in pixel units."); | |
} | |
@if unit($to-context) != 'px' { | |
$error: rhythm-throw-error($rhythm-invalid-unit-error, "Parameter $to-context must resolve to a value in pixel units."); | |
} | |
// Convert input length to pixels | |
$px-length: $length; | |
@if $from-unit != 'px' { | |
// Convert relative units using the from-context parameter. | |
@if $from-unit == 'em' { $px-length: $length * $from-context / 1em } | |
@else if $from-unit == 'rem' { $px-length: $length * $base-font-size / 1rem } | |
@else if $from-unit == '%' { $px-length: $length * $from-context / 100% } | |
@else if $from-unit == 'ex' { $px-length: $length * $from-context / 2ex } | |
@else { | |
$error: rhythm-throw-error($rhythm-invalid-unit-error, "#{$from-unit} unit not supported"); | |
@return $length; | |
} | |
} | |
// Convert length in pixels to the output unit | |
$output-length: $px-length; | |
@if $to-unit != 'px' { | |
// Relative units | |
@if $to-unit == 'em' { $output-length: $px-length * 1em / $to-context } | |
@else if $to-unit == 'rem' { $output-length: $px-length * 1rem / $base-font-size } | |
@else if $to-unit == '%' { $output-length: $px-length * 100% / $to-context } | |
@else if $to-unit == 'ex' { $output-length: $px-length * 2ex / $to-context } | |
@else { | |
$error: rhythm-throw-error($rhythm-invalid-unit-error, "#{$to-unit} unit not supported"); | |
} | |
} | |
@return $output-length; | |
} | |
// API | |
// ------------------------------------------------------------------------------------------------- | |
// @private Outputs rhythm values. For rem units, outputs pixel fallbacks | |
// by default. | |
@mixin render-rhythm($property, $values) { | |
$output: (); | |
@each $value in $values { | |
@if unit($value) == px { | |
// Ensure all pixel values are rounded to the nearest pixel. | |
$output: join($output, round($value)); | |
} | |
@else { | |
$output: join($output, $value); | |
} | |
} | |
#{$property}: $output; | |
} | |
@mixin rhythm-establish($font-size: $rhythm-base-font-size, $line-height: $rhythm-base-line-height) { | |
$processed-values: rhythm-process-base-values($font-size, $line-height); | |
// Render HTML element | |
html { | |
font-size: nth($processed-values, 1); | |
line-height: nth($processed-values, 2); | |
} | |
} | |
@include rhythm-establish($font-size: ); | |
This file contains hidden or 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
Invalid CSS after "...sh($font-size: ": expected mixin argument, was ");" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment