Skip to content

Instantly share code, notes, and snippets.

@frontendbeast

frontendbeast/SassMeister-input.scss

Created May 14, 2015 13:20
Show Gist options
  • Save frontendbeast/fac0c7eb86ddce8aead9 to your computer and use it in GitHub Desktop.
Save frontendbeast/fac0c7eb86ddce8aead9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. frontendbeast created this gist May 14, 2015.
    104 changes: 104 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,104 @@
    // ----
    // Sass (v3.3.14)
    // Compass (v1.0.1)
    // ----

    // Sass breakpoints with contextual rem calculations
    // ===================================================================
    // I'm using rems, and most of my elements will use be relative to the
    // base setting on the html element (e.g. p, ul, etc.), but some will
    // have specific sizes, which I want to set in pixels but convert via
    // Sass into rems, relative to the context of the current breakpoint.

    // This is how I'm doing it.

    // Array of breakpoints and what 1rem should equal
    $breakpoints :(
    sm: (
    remSize: 16px,
    width: 320px
    ),
    md: (
    remSize: 19px,
    width: 480px
    ),
    lg: (
    remSize: 24px,
    width: 800px
    ),
    xl: (
    remSize: 24px,
    width: 1200px
    )
    );

    // Get width of the requested breakpoint
    @function get-breakpoint-width($breakpoint) {
    @if(map-has-key($breakpoints, $breakpoint)) {
    @return em(map-get(map-get($breakpoints, $breakpoint), width));
    } @else {
    @return $breakpoint;
    }
    }

    // Convert px to em
    @function em($px-value) {
    $size: $px-value/ 16px;
    @return $size * 1em;
    }

    // Convert px to rem, relative to context
    @function rem($px-value, $multiplier: 16px) {
    $size: $px-value / $multiplier;
    @return $size * 1rem;
    }

    // Get remSize for a specified breakpoint
    @function get-rem-size($breakpoint) {
    @if(map-has-key($breakpoints, $breakpoint)) {
    @return map-get(map-get($breakpoints, $breakpoint), remSize)
    } @else {
    @warn "The breakpoint `#{$breakpoint}` is not defined.";
    }
    }
    // Convert a pixel size relative to a breakpoint
    @function get-size($size: 16px, $breakpoint: sm) {
    $multiplier: get-rem-size($breakpoint);
    @return rem($size, $multiplier);
    }

    // Basic mq
    @mixin respond-min($breakpoint) {
    $width: get-breakpoint($breakpoint);

    @media screen and (min-width: $width) {
    @content;
    }
    }


    // Setup base rem sizing
    html {
    font-size: get-rem-size(sm); // 16px

    @include respond-min(md) {
    font-size: get-rem-size(md); // 19px
    }

    @include respond-min(lg) {
    font-size: get-rem-size(lg); // 24px
    }
    }

    // Example usage
    .c-heading-main {
    font-size: get-size(24px); // 24px relative to a 16px base = 1.5rem

    @include respond-min(md) {
    font-size: get-size(38px, md); // 38px relative to a 19px base = 2rem
    }

    @include respond-min(lg) {
    font-size: get-size(60px, lg); // 60px relative to a 24px base = 2.5rem
    }
    }
    27 changes: 27 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    html {
    font-size: 16px;
    }
    @media screen and (min-width: get-breakpoint(md)) {
    html {
    font-size: 19px;
    }
    }
    @media screen and (min-width: get-breakpoint(lg)) {
    html {
    font-size: 24px;
    }
    }

    .c-heading-main {
    font-size: 1.5rem;
    }
    @media screen and (min-width: get-breakpoint(md)) {
    .c-heading-main {
    font-size: 2rem;
    }
    }
    @media screen and (min-width: get-breakpoint(lg)) {
    .c-heading-main {
    font-size: 2.5rem;
    }
    }