Skip to content

Instantly share code, notes, and snippets.

@codingdesigner

codingdesigner/SassMeister-input.scss

Created March 27, 2015 18:20
Download ZIP

Revisions

  1. codingdesigner created this gist Mar 27, 2015.
    130 changes: 130 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,130 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    $root-typesize : 16px;

    // 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();
    }
    59 changes: 59 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    h1 {
    font-family: sans;
    font-weight: 300;
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: base-line-calc(0.5, 36px);
    margin-top: base-line-calc(0.5, 36px);
    }

    h2 {
    font-family: sans;
    font-weight: 300;
    font-size: 32px;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: base-line-calc(0.5, 32px);
    margin-top: base-line-calc(0.5, 32px);
    }

    h3 {
    font-family: sans;
    font-weight: 300;
    font-size: 1.75px;
    font-size: 0.109375rem;
    line-height: 1;
    margin-bottom: base-line-calc(0.5, 1.75px);
    margin-top: base-line-calc(0.5, 1.75px);
    }

    h4 {
    font-family: sans;
    font-weight: 300;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: base-line-calc(0.25, 24px);
    margin-top: base-line-calc(0.25, 24px);
    }

    h5 {
    font-family: sans;
    font-weight: 300;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: base-line-calc(0.25, 20px);
    margin-top: base-line-calc(0.25, 20px);
    }

    h6 {
    font-family: sans;
    font-weight: 300;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1;
    margin-bottom: base-line-calc(0.25, 16px);
    margin-top: base-line-calc(0.25, 16px);
    }