Skip to content

Instantly share code, notes, and snippets.

@baptiste-roullin

baptiste-roullin/SassMeister-input-HTML.html

Created March 11, 2014 11:34
Download ZIP

Revisions

  1. baptiste-roullin revised this gist Mar 11, 2014. 2 changed files with 7 additions and 7 deletions.
    2 changes: 1 addition & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@ $base-color: #AD141E;
    $i: 0;

    @for $i from 1 through 6 {
    $decliCouleur: adjust-hue( $base-color, $i*20 );
    $decliCouleur: adjust-hue( $base-color, $i*30 );
    .item-#{$i} { background-color:$decliCouleur}
    }

    12 changes: 6 additions & 6 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,25 +1,25 @@
    .item-1 {
    background-color: #ad3d14;
    background-color: #ad5614;
    }

    .item-2 {
    background-color: #ad7014;
    background-color: #ada314;
    }

    .item-3 {
    background-color: #ada314;
    background-color: #6bad14;
    }

    .item-4 {
    background-color: #84ad14;
    background-color: #1ead14;
    }

    .item-5 {
    background-color: #51ad14;
    background-color: #14ad56;
    }

    .item-6 {
    background-color: #1ead14;
    background-color: #14ada3;
    }

    div {
  2. baptiste-roullin created this gist Mar 11, 2014.
    6 changes: 6 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
    <div class="item-4"></div>
    <div class="item-5"></div>
    <div class="item-6"></div>
    19 changes: 19 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    // ----
    // Sass (v3.3.1)
    // Compass (v1.0.0.alpha.18)
    // ----

    $base-color: #AD141E;
    $i: 0;

    @for $i from 1 through 6 {
    $decliCouleur: adjust-hue( $base-color, $i*20 );
    .item-#{$i} { background-color:$decliCouleur}
    }

    div {
    width:100px;
    height:100px;
    position:relative;
    margin:1em;
    }
    30 changes: 30 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    .item-1 {
    background-color: #ad3d14;
    }

    .item-2 {
    background-color: #ad7014;
    }

    .item-3 {
    background-color: #ada314;
    }

    .item-4 {
    background-color: #84ad14;
    }

    .item-5 {
    background-color: #51ad14;
    }

    .item-6 {
    background-color: #1ead14;
    }

    div {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 1em;
    }
    6 changes: 6 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
    <div class="item-4"></div>
    <div class="item-5"></div>
    <div class="item-6"></div>