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
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<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>
Raw
SassMeister-input.scss
// ----
// 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;
}
}
}
Raw
SassMeister-output.css
.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;
}
Raw
SassMeister-rendered.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment