Skip to content

Instantly share code, notes, and snippets.

@laurend

laurend/SassMeister-input-HTML.html

Created February 20, 2014 13:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save laurend/9114086 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save laurend/9114086 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Lauren Dreier created this gist Feb 20, 2014.
    3 changes: 3 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <div class="green">Home</div>

    <div class="gray"></div>
    38 changes: 38 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    // ----
    // Sass (v3.3.0.rc.4)
    // Compass (v1.0.0.alpha.18)
    // ----

    $green: #1eb478;
    $green-dark: darken($green, 4);

    $gray: #6a737b;
    $gray-dark: darken($gray, 4);

    div {
    width: 12em;
    height: 3em;
    transition: background-color 50ms ease-in-out;
    color: white;
    text-align: center;
    line-height: 3em;
    text-transform: uppercase;
    font-family: "bentonsans";
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    letter-spacing: .03em
    }

    .green {
    background-color: $green;
    &:active {
    background-color: $green-dark;
    }
    }

    .gray {
    background-color: $gray;
    &:active {
    background-color: $gray-dark;
    }
    }
    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 @@
    div {
    width: 12em;
    height: 3em;
    transition: background-color 50ms ease-in-out;
    color: white;
    text-align: center;
    line-height: 3em;
    text-transform: uppercase;
    font-family: "bentonsans";
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.03em;
    }

    .green {
    background-color: #1eb478;
    }
    .green:active {
    background-color: #1ba36c;
    }

    .gray {
    background-color: #6a737b;
    }
    .gray:active {
    background-color: #616970;
    }
    3 changes: 3 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <div class="green">Home</div>

    <div class="gray"></div>