Skip to content

Instantly share code, notes, and snippets.

@blackfalcon

blackfalcon/SassMeister-input-HTML.haml

Last active December 1, 2015 23:22
Show Gist options
  • Save blackfalcon/25eb88f20b5534f738f5 to your computer and use it in GitHub Desktop.
Save blackfalcon/25eb88f20b5534f738f5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. blackfalcon revised this gist Dec 1, 2015. 2 changed files with 3 additions and 3 deletions.
    4 changes: 2 additions & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -40,8 +40,8 @@ $breakpoints: (
    background-color: pink;
    }
    // typical target for 'handhelds' when minor adjustments
    // are needed when in portrait view state
    @include media("screen", "portrait", "<phone") {
    // are needed when in landscape view state
    @include media("screen", "landscape", "<phone") {
    width: 100%;
    background-color: purple;
    }
    2 changes: 1 addition & 1 deletion SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@
    }
    }

    @media only screen and (orientation: portrait) and (max-width: 735px) {
    @media only screen and (orientation: landscape) and (max-width: 735px) {
    .block {
    width: 100%;
    background-color: purple;
  2. blackfalcon created this gist Dec 1, 2015.
    1 change: 1 addition & 0 deletions SassMeister-input-HTML.haml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    .block
    64 changes: 64 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    // ----
    // libsass (v3.2.5)
    // ----

    @import "include-media";
    // --------------------------------------------


    // Configs set for using include-media lib
    $media-expressions: (
    'screen': 'only screen',
    'landscape': '(orientation: landscape)',
    'portrait': '(orientation: portrait)',
    'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
    );

    $breakpoints: (
    phone: 736px,
    tablet: 1024px,
    desktop-large: 1280px
    );


    // Example base CSS for UI
    // Consider this an "IE8 First" solution
    // assuming a 1024px x 768px legacy standard
    .block {
    width: 984px;
    height: 5em;
    margin: 0 auto;
    background-color: red;
    }


    // All variances are broken into their respective media queries
    .block {
    // target all 'handheld' devices
    @include media("screen", "<=phone") {
    width: 100%;
    background-color: pink;
    }
    // typical target for 'handhelds' when minor adjustments
    // are needed when in portrait view state
    @include media("screen", "portrait", "<phone") {
    width: 100%;
    background-color: purple;
    }
    // target majority of tablet devices
    @include media("screen", ">phone", "<tablet") {
    width: 900px;
    background-color: yellow;
    }
    // typical target for tablets when minor adjustments
    // are needed when in portrait view state
    @include media("screen", "portrait", ">phone", "<tablet") {
    width: 700px;
    background-color: orange;
    }
    // target for large screen devices and monitors
    @include media("screen", ">=desktop-large") {
    width: 1128px;
    background-color: green;
    }
    }
    41 changes: 41 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    .block {
    width: 984px;
    height: 5em;
    margin: 0 auto;
    background-color: red;
    }

    @media only screen and (max-width: 736px) {
    .block {
    width: 100%;
    background-color: pink;
    }
    }

    @media only screen and (orientation: portrait) and (max-width: 735px) {
    .block {
    width: 100%;
    background-color: purple;
    }
    }

    @media only screen and (min-width: 737px) and (max-width: 1023px) {
    .block {
    width: 900px;
    background-color: yellow;
    }
    }

    @media only screen and (orientation: portrait) and (min-width: 737px) and (max-width: 1023px) {
    .block {
    width: 700px;
    background-color: orange;
    }
    }

    @media only screen and (min-width: 1280px) {
    .block {
    width: 1128px;
    background-color: green;
    }
    }
    1 change: 1 addition & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div class='block'></div>