Skip to content

Instantly share code, notes, and snippets.

@Vasso

Vasso/SassMeister-input-HTML.html

Created February 2, 2015 13:26
Show Gist options
  • Save Vasso/875ed6990f7030e09191 to your computer and use it in GitHub Desktop.
Save Vasso/875ed6990f7030e09191 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Vasso created this gist Feb 2, 2015.
    18 changes: 18 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <div class="ec-table ec-table--nested ec-table--small">
    <div class="ec-table__list ec-table__list--head">
    <div class="ec-table__row">
    <div class="ec-table__cell ec-table__cell--tiers"></div>
    <div class="ec-table__cell"></div>
    <div class="ec-table__cell"></div>
    <div class="ec-table__cell"></div>
    </div>
    </div>
    <div class="ec-table__list ec-table__list--body">
    <div class="ec-table__row">
    <div class="ec-table__cell ec-table__cell--tiers"></div>
    <div class="ec-table__cell"></div>
    <div class="ec-table__cell"></div>
    <div class="ec-table__cell"></div>
    </div>
    </div>
    </div>
    54 changes: 54 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    // ----
    // Sass (v3.4.11)
    // Compass (v1.0.3)
    // ----

    $blue: #4183c4;
    $gray: #eeeeee;
    $primary-color: $blue;
    $secondary-color: $gray;

    .ec-table {
    color: $primary-color;

    &__list {
    color: $secondary-color;
    &--list-head {
    font-size: 16px;
    }
    &--list-head {
    .ec-table__cell {
    font-weight: bold;
    }
    }
    }
    &__row {
    color: $primary-color;
    }
    &__cell {
    color: $primary-color;
    &--tiers {
    font-size: 1px;
    }
    }

    &--nested {
    .ec-table__row {
    color: $secondary-color;
    }
    }

    &--small {
    height: 100px;

    .ec-table__list-head {
    font-size: 12px;
    .ec-table__cell {
    font-weight: bold;
    }
    }
    .ec-table__row {
    height: 20px;
    }
    }
    }
    36 changes: 36 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    .ec-table {
    color: #4183c4;
    }
    .ec-table__list {
    color: #eeeeee;
    }
    .ec-table__list--list-head {
    font-size: 16px;
    }
    .ec-table__list--list-head .ec-table__cell {
    font-weight: bold;
    }
    .ec-table__row {
    color: #4183c4;
    }
    .ec-table__cell {
    color: #4183c4;
    }
    .ec-table__cell--tiers {
    font-size: 1px;
    }
    .ec-table--nested .ec-table__row {
    color: #eeeeee;
    }
    .ec-table--small {
    height: 100px;
    }
    .ec-table--small .ec-table__list-head {
    font-size: 12px;
    }
    .ec-table--small .ec-table__list-head .ec-table__cell {
    font-weight: bold;
    }
    .ec-table--small .ec-table__row {
    height: 20px;
    }
    18 changes: 18 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <div class="ec-table ec-table--nested ec-table--small">
    <div class="ec-table__list ec-table__list--head">
    <div class="ec-table__row">
    <div class="ec-table__cell ec-table__cell--tiers"></div>
    <div class="ec-table__cell"></div>
    <div class="ec-table__cell"></div>
    <div class="ec-table__cell"></div>
    </div>
    </div>
    <div class="ec-table__list ec-table__list--body">
    <div class="ec-table__row">
    <div class="ec-table__cell ec-table__cell--tiers"></div>
    <div class="ec-table__cell"></div>
    <div class="ec-table__cell"></div>
    <div class="ec-table__cell"></div>
    </div>
    </div>
    </div>