Skip to content

Instantly share code, notes, and snippets.

@damien-m
Created October 21, 2014 19:36

Revisions

  1. damien-m created this gist Oct 21, 2014.
    6 changes: 6 additions & 0 deletions SassMeister-input-HTML.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <div class="box black"></div>
    <div class="box blue"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box purple"></div>
    <div class="box teal"></div>
    65 changes: 65 additions & 0 deletions SassMeister-input.scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    // ----
    // Sass (v3.4.6)
    // Compass (v1.0.1)
    // ----

    @function darker($color,$percent: 10){
    @return darken($color, $percent);
    }

    $black: #5C6166;
    $blue: #6ECFF5;
    $green: #A1CF64;
    $red: #D95C5C;
    $purple: #564F8A;
    $teal: #00B5AD;

    .box{
    background: #F05940;
    height: 40px; width: 40px;
    }

    .box-2{
    background:darker(#F05940);
    }

    .box-3{
    background:lighten(#34495e, 10%);
    }

    .black {
    background-color: $black;
    &:hover{
    background: darker($black);
    }
    }
    .blue{
    background-color: $blue;
    &:hover{
    background: darker($blue);
    }
    }
    .green {
    background-color: $green;
    &:hover{
    background: darker($green);
    }
    }
    .red {
    background-color: $red;
    &:hover{
    background: darker($red);
    }
    }
    .purple {
    background-color: $purple;
    &:hover{
    background: darker($purple);
    }
    }
    .teal {
    background-color: $teal;
    &:hover{
    background: darker($teal);
    }
    }
    55 changes: 55 additions & 0 deletions SassMeister-output.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    .box {
    background: #F05940;
    height: 40px;
    width: 40px;
    }

    .box-2 {
    background: #eb3112;
    }

    .box-3 {
    background: #46627f;
    }

    .black {
    background-color: #5C6166;
    }
    .black:hover {
    background: #44474b;
    }

    .blue {
    background-color: #6ECFF5;
    }
    .blue:hover {
    background: #3ebff2;
    }

    .green {
    background-color: #A1CF64;
    }
    .green:hover {
    background: #89c33d;
    }

    .red {
    background-color: #D95C5C;
    }
    .red:hover {
    background: #cf3333;
    }

    .purple {
    background-color: #564F8A;
    }
    .purple:hover {
    background: #423c6a;
    }

    .teal {
    background-color: #00B5AD;
    }
    .teal:hover {
    background: #00827c;
    }
    6 changes: 6 additions & 0 deletions SassMeister-rendered.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <div class="box black"></div>
    <div class="box blue"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box purple"></div>
    <div class="box teal"></div>