Skip to content

Instantly share code, notes, and snippets.

@ruedap

ruedap/SassMeister-input-HTML.haml

Created January 27, 2015 06:09
Show Gist options
  • Save ruedap/c632a36cb21d30a36566 to your computer and use it in GitHub Desktop.
Save ruedap/c632a36cb21d30a36566 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ruedap created this gist Jan 27, 2015.
    6 changes: 6 additions & 0 deletions SassMeister-input-HTML.haml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    .block
    .block__element foo

    .is--responsive
    .block
    .block__element bar
    21 changes: 21 additions & 0 deletions SassMeister-input.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    // ----
    // Sass (v3.4.9)
    // Compass (v1.0.1)
    // ----
    =media($target)
    .is--responsive &
    @if $target == mobile
    @media screen and (max-width: 767px)
    @content
    @if $target == tablet
    @media screen and (min-width: 768px)
    @content

    .block
    &__element
    color: red
    +media(mobile)
    color: green
    +media(tablet)
    color: blue
    13 changes: 13 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    .block__element {
    color: red;
    }
    @media screen and (max-width: 767px) {
    .is--responsive .block__element {
    color: green;
    }
    }
    @media screen and (min-width: 768px) {
    .is--responsive .block__element {
    color: blue;
    }
    }
    8 changes: 8 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <div class='block'>
    <div class='block__element'>foo</div>
    </div>
    <div class='is--responsive'>
    <div class='block'>
    <div class='block__element'>bar</div>
    </div>
    </div>