Skip to content

Instantly share code, notes, and snippets.

/SassMeister-input-HTML.html

Created July 7, 2014 21:04
Show Gist options
  • Save anonymous/0e655c89128057a52031 to your computer and use it in GitHub Desktop.
Save anonymous/0e655c89128057a52031 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jul 7, 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="block">
    <div class="block__element">Stuff</div>
    <div class="block__element--modifier">Red Stuff</div>
    <div class="block__element--and-another">Yellow Stuff</div>
    <div class="block__element--modifier block__element--and-another">Blue Stuff</div>
    </div>
    21 changes: 21 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    // ----
    // Sass (v3.3.9)
    // Compass (v1.0.0.alpha.20)
    // ----

    .block {
    &__element {
    background-color: #000;
    color: #fff;

    &--modifier {
    color: #f00;
    }
    &--and-another {
    color: #ff0;
    }
    &--modifier + &--and-another {
    color: #00f;
    }
    }
    }
    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 {
    background-color: #000;
    color: #fff;
    }
    .block__element--modifier {
    color: #f00;
    }
    .block__element--and-another {
    color: #ff0;
    }
    .block__element--modifier + .block__element--and-another {
    color: #00f;
    }
    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="block">
    <div class="block__element">Stuff</div>
    <div class="block__element--modifier">Red Stuff</div>
    <div class="block__element--and-another">Yellow Stuff</div>
    <div class="block__element--modifier block__element--and-another">Blue Stuff</div>
    </div>