Skip to content

Instantly share code, notes, and snippets.

@codingdesigner

codingdesigner/SassMeister-input.scss

Last active August 29, 2015 14:17
Download ZIP

Revisions

  1. codingdesigner revised this gist Mar 27, 2015. No changes.
  2. codingdesigner revised this gist Mar 27, 2015. No changes.
  3. codingdesigner created this gist Mar 27, 2015.
    174 changes: 174 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,174 @@
    // ----
    // 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();
    }
    53 changes: 53 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    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; }