Skip to content

Instantly share code, notes, and snippets.

@codingdesigner
Last active August 29, 2015 14:17
Show Gist options
  • Save codingdesigner/3df01c86becef37addee to your computer and use it in GitHub Desktop.
Save codingdesigner/3df01c86becef37addee to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.1.0)
// ----
// Calculate ems
// ========================================================================== */
//
// @params
// $value
// $context
//
@function em($value, $context: $base-font-size) {
@if unit($value) == '' {
$value: $value * 1em;
}
@if unit($value) == 'em' {
@return $value;
}
@if unit($value) != px {
$value: px($value);
}
@if unit($context) != px {
$context: px($context);
}
@return ($value / $context) * 1em;
}
// Calculate the em value of n baselines
// ========================================================================== */
//
// @params
// $lines
// $context
//
@function base-line-calc($lines: 1, $context: false) {
$calc: $lines * $base-line-em;
@if $context {
$calc: em($lines * $base-line-em, em($context));
}
@return $calc;
}
// Variables
// ========================================================================== */
$root-typesize : 16px;
$base-font-size : $root-typesize;
$base-line-px : 24px;
$base-line-em : em($base-line-px);
// Mixin - Font-size rem
// ========================================================================== */
//
// @params
// $px
// $root-px
//
@mixin fontsize-rem($px, $root-px: $root-typesize) {
font-size: $px;
font-size: #{$px / $root-px}rem;
}
// ==========================================================================
// Components Atoms - Headings
// ========================================================================== */
//////////////////////////////
// Header Element Default Variables
// see ~/scss/00-global/02-variables/_typography.scss
// for final 02-variables
$heading-sizes: 36px 32px 1.75px 24px 20px 16px !default;
$heading-line-heights: 1 1 1 1 1 1 !default;
$font-headline: sans !default;
//////////////////////////////
// Mixin - Heading Base
// ========================================================================== */
@mixin heading-base() {
font: {
family: $font-headline;
weight: 300;
}
}
// Mixin - Heading Size
// ========================================================================== */
//
// @params
// $size
// $line-height
//
@mixin heading-size($size, $line-height: false) {
@include fontsize-rem($size);
@if $line-height {
line-height: $line-height;
}
}
// Mixin - H1
// ========================================================================== */
@mixin h1() {
@include heading-base();
@include heading-size(nth($heading-sizes, 1), nth($heading-line-heights, 1));
margin-bottom: base-line-calc(0.5, nth($heading-sizes, 1));
margin-top: base-line-calc(0.5, nth($heading-sizes, 1));
}
// Mixin - H2
// ========================================================================== */
@mixin h2() {
@include heading-base();
@include heading-size(nth($heading-sizes, 2), nth($heading-line-heights, 2));
margin-bottom: base-line-calc(0.5, nth($heading-sizes, 2));
margin-top: base-line-calc(0.5, nth($heading-sizes, 2));
}
// Mixin - H3
// ========================================================================== */
@mixin h3() {
@include heading-base();
@include heading-size(nth($heading-sizes, 3), nth($heading-line-heights, 3));
margin-bottom: base-line-calc(0.5, nth($heading-sizes, 3));
margin-top: base-line-calc(0.5, nth($heading-sizes, 3));
}
// Mixin - H4
// ========================================================================== */
@mixin h4() {
@include heading-base();
@include heading-size(nth($heading-sizes, 4), nth($heading-line-heights, 4));
margin-bottom: base-line-calc(0.25, nth($heading-sizes, 4));
margin-top: base-line-calc(0.25, nth($heading-sizes, 4));
}
// Mixin - H5
// ========================================================================== */
@mixin h5() {
@include heading-base();
@include heading-size(nth($heading-sizes, 5), nth($heading-line-heights, 5));
margin-bottom: base-line-calc(0.25, nth($heading-sizes, 5));
margin-top: base-line-calc(0.25, nth($heading-sizes, 5));
}
// Mixin - H6
// ========================================================================== */
@mixin h6() {
@include heading-base();
@include heading-size(nth($heading-sizes, 6), nth($heading-line-heights, 6));
margin-bottom: base-line-calc(0.25, nth($heading-sizes, 6));
margin-top: base-line-calc(0.25, nth($heading-sizes, 6));
}
// Heading Element Styles
h1 {
@include h1();
}
h2 {
@include h2();
}
h3 {
@include h3();
}
h4 {
@include h4();
}
h5 {
@include h5();
}
h6 {
@include h6();
}
h1 {
font-family: sans;
font-weight: 300;
font-size: 36px;
font-size: 2.25rem;
line-height: 1;
margin-bottom: 0.75em;
margin-top: 0.75em; }
h2 {
font-family: sans;
font-weight: 300;
font-size: 32px;
font-size: 2rem;
line-height: 1;
margin-bottom: 0.75em;
margin-top: 0.75em; }
h3 {
font-family: sans;
font-weight: 300;
font-size: 1.75px;
font-size: 0.10938rem;
line-height: 1;
margin-bottom: 0.75em;
margin-top: 0.75em; }
h4 {
font-family: sans;
font-weight: 300;
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 0.375em;
margin-top: 0.375em; }
h5 {
font-family: sans;
font-weight: 300;
font-size: 20px;
font-size: 1.25rem;
line-height: 1;
margin-bottom: 0.375em;
margin-top: 0.375em; }
h6 {
font-family: sans;
font-weight: 300;
font-size: 16px;
font-size: 1rem;
line-height: 1;
margin-bottom: 0.375em;
margin-top: 0.375em; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment