Mixins to help calculate heights, line-heights and padding.
Clone or download
Latest commit 6371d24 Apr 28, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
functions Feat: Allow on-the-fly baseline change Oct 17, 2015
mixins Fix #18: Correctly parse the px value Jan 10, 2016
CHANGELOG.md 2.1.0 (#20) Apr 28, 2016
LICENSE Initial commit Mar 23, 2015
README.md Update README.md Jan 10, 2016
bower.json Bump to 2.0.6 for package managers Jan 10, 2016
eyeglass-exports.es6 Added eyeglass support (#19) Apr 28, 2016
index.es6 Added eyeglass support (#19) Apr 28, 2016
package.json 2.1.0 (#20) Apr 28, 2016
sass-height.scss Release 2.0.3 Oct 17, 2015

README.md

SASS Height

Mixin to help calculate heights, line-heights and padding.

Installation

Reference the path relative to your main .scss file

Bower

  1. bower install sass-height --save-dev
  2. @import "../../bower_components/sass-height/sass-height";

NPM

  1. npm install sass-height --save-dev
  2. @import "../../node_modules/sass-height/sass-height";

Configuration

You can override any of the defaults by adding a $sassheight map object.

// Defaults:
$sassheight: (
  font-base: 16px, // must be a px value
  rem: true, // output as rem (true) or px (false)
  baseline: 4px, // any number
  debug: false // true will output variables as CSS properties
);

Usage

Font size and line-height

Return a font-size in rems and a unitless line-height equivalent to 16px. It uses the defaults listed above.

.type {
  @include height( 12px );
}

Set an arbitrary height

Return a font-size in rems, a unitless line-height equivalent to 16px and top and bottom padding (in rems) equivalent to 10px each (10 + 10 + 16 = 36).

.type {
  @include height( 12px, 36px );
}

Line height smaller than the font-size

The same as the previous example but this will have a smaller line-height resulting in text very close together

.type {
  @include height( 36px, 32px );
}

New in 2.0: Modify the baseline on-the-fly

This will round up to the next multiple of 8; just for the class this is called upon.

.type {
  @include height( 32px, auto, 8px );
}

Precision

You need to set the SASS decimal place precision to 7 to get the correct rounding in all browsers.

Demo

http://codepen.io/craigmdennis/pen/VYqJqq