Skip to content

Instantly share code, notes, and snippets.

@aarmour

aarmour/SassMeister-input-HTML.html

Last active September 21, 2015 22:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aarmour/924a489b149f6c2d0b72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aarmour/924a489b149f6c2d0b72 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<h3>Ramps</h3>
<h4>Gray</h4>
<div class="swatch swatch__gray--lighter">lighter</div>
<div class="swatch swatch__gray--light">light</div>
<div class="swatch swatch__gray">default</div>
<div class="swatch swatch__gray--dark">dark</div>
<div class="swatch swatch__gray--darker">darker</div>
<h4>Blue</h4>
<div class="swatch swatch__blue--lighter">lighter</div>
<div class="swatch swatch__blue--light">light</div>
<div class="swatch swatch__blue">default</div>
<div class="swatch swatch__blue--dark">dark</div>
<div class="swatch swatch__blue--darker">darker</div>
<h3>o-buttons</h3>
<a class="o-buttons o-buttons--info">Info</a>
<a class="o-buttons o-buttons--success">Success</a>
<a class="o-buttons o-buttons--warning">Warning</a>
<a class="o-buttons o-buttons--error">Error</a>
<h3>o-alerts</h3>
<div class="o-alerts o-alerts--info">Info</div>
<div class="o-alerts o-alerts--success">Success</div>
<div class="o-alerts o-alerts--warning">Warning</div>
<div class="o-alerts o-alerts--error">Error</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
// o-colors
// Ramps
$o-colors-gray: gray !default;
$o-colors-gray-light: lighten($o-colors-gray, 15%);
$o-colors-gray-lighter: lighten($o-colors-gray-light, 15%);
$o-colors-gray-dark: darken($o-colors-gray, 15%);
$o-colors-gray-darker: darken($o-colors-gray-dark, 15%);
$o-colors-blue: #5bc0de !default;
$o-colors-blue-light: lighten($o-colors-blue, 15%);
$o-colors-blue-lighter: lighten($o-colors-blue-light, 15%);
$o-colors-blue-dark: darken($o-colors-blue, 15%);
$o-colors-blue-darker: darken($o-colors-blue-dark, 15%);
.swatch {
height: 30px;
width: 100px;
}
.swatch__gray--lighter {
background-color: $o-colors-gray-lighter;
}
.swatch__gray--light {
background-color: $o-colors-gray-light;
}
.swatch__gray {
background-color: $o-colors-gray;
}
.swatch__gray--dark {
background-color: $o-colors-gray-dark;
}
.swatch__gray--darker {
background-color: $o-colors-gray-darker;
}
.swatch__blue--lighter {
background-color: $o-colors-blue-lighter;
}
.swatch__blue--light {
background-color: $o-colors-blue-light;
}
.swatch__blue {
background-color: $o-colors-blue;
}
.swatch__blue--dark {
background-color: $o-colors-blue-dark;
}
.swatch__blue--darker {
background-color: $o-colors-blue-darker;
}
// Semantic
$o-colors-info: $o-colors-blue !default;
$o-colors-success: #5cb85c !default;
$o-colors-warning: #f0ad4e !default;
$o-colors-error: #d9534f !default;
$o-colors-info-border: $o-colors-blue-dark !default;
$o-colors-success-border: $o-colors-success !default;
$o-colors-warning-border: $o-colors-warning !default;
$o-colors-error-border: $o-colors-error !default;
$o-colors-info-bg: $o-colors-blue-lighter !default;
$o-colors-success-bg: lighten($o-colors-success, 20%) !default;
$o-colors-warning-bg: lighten($o-colors-warning, 20%) !default;
$o-colors-error-bg: lighten($o-colors-error, 20%) !default;
$o-colors-info-text: $o-colors-blue-darker !default;
$o-colors-success-text: darken($o-colors-success, 25%) !default;
$o-colors-warning-text: darken($o-colors-warning, 25%) !default;
$o-colors-error-text: darken($o-colors-error, 25%) !default;
// o-buttons
.o-buttons {
padding: 5px 15px;
border-radius: 4px;
border: solid 1px;
}
.o-buttons--info {
background-color: $o-colors-info-bg;
color: $o-colors-info-text;
border-color: $o-colors-info-border;
}
.o-buttons--success {
background-color: $o-colors-success-bg;
color: $o-colors-success-text;
border-color: $o-colors-success-border;
}
.o-buttons--warning {
background-color: $o-colors-warning-bg;
color: $o-colors-warning-text;
border-color: $o-colors-warning-border;
}
.o-buttons--error {
background-color: $o-colors-error-bg;
color: $o-colors-error-text;
border-color: $o-colors-error-border;
}
// o-alerts
.o-alerts {
padding: 15px;
margin-bottom: 15px;
border: solid 1px;
}
.o-alerts--info {
color: $o-colors-info-text;
border-color: $o-colors-info-border;
background-color: $o-colors-info-bg;
}
.o-alerts--success {
color: $o-colors-success-text;
border-color: $o-colors-success-border;
background-color: $o-colors-success-bg;
}
.o-alerts--warning {
color: $o-colors-warning-text;
border-color: $o-colors-warning-border;
background-color: $o-colors-warning-bg;
}
.o-alerts--error {
color: $o-colors-error-text;
border-color: $o-colors-error-border;
background-color: $o-colors-error-bg;
}
Raw
SassMeister-output.css
.swatch {
height: 30px;
width: 100px;
}
.swatch__gray--lighter {
background-color: #cccccc;
}
.swatch__gray--light {
background-color: #a6a6a6;
}
.swatch__gray {
background-color: gray;
}
.swatch__gray--dark {
background-color: #5a5a5a;
}
.swatch__gray--darker {
background-color: #343434;
}
.swatch__blue--lighter {
background-color: #daf1f8;
}
.swatch__blue--light {
background-color: #9bd8eb;
}
.swatch__blue {
background-color: #5bc0de;
}
.swatch__blue--dark {
background-color: #28a1c5;
}
.swatch__blue--darker {
background-color: #1b6d85;
}
.o-buttons {
padding: 5px 15px;
border-radius: 4px;
border: solid 1px;
}
.o-buttons--info {
background-color: #daf1f8;
color: #1b6d85;
border-color: #28a1c5;
}
.o-buttons--success {
background-color: #a3d7a3;
color: #2d672d;
border-color: #5cb85c;
}
.o-buttons--warning {
background-color: #f8d9ac;
color: #b06d0f;
border-color: #f0ad4e;
}
.o-buttons--error {
background-color: #eba5a3;
color: #8b211e;
border-color: #d9534f;
}
.o-alerts {
padding: 15px;
margin-bottom: 15px;
border: solid 1px;
}
.o-alerts--info {
color: #1b6d85;
border-color: #28a1c5;
background-color: #daf1f8;
}
.o-alerts--success {
color: #2d672d;
border-color: #5cb85c;
background-color: #a3d7a3;
}
.o-alerts--warning {
color: #b06d0f;
border-color: #f0ad4e;
background-color: #f8d9ac;
}
.o-alerts--error {
color: #8b211e;
border-color: #d9534f;
background-color: #eba5a3;
}
Raw
SassMeister-rendered.html
<h3>Ramps</h3>
<h4>Gray</h4>
<div class="swatch swatch__gray--lighter">lighter</div>
<div class="swatch swatch__gray--light">light</div>
<div class="swatch swatch__gray">default</div>
<div class="swatch swatch__gray--dark">dark</div>
<div class="swatch swatch__gray--darker">darker</div>
<h4>Blue</h4>
<div class="swatch swatch__blue--lighter">lighter</div>
<div class="swatch swatch__blue--light">light</div>
<div class="swatch swatch__blue">default</div>
<div class="swatch swatch__blue--dark">dark</div>
<div class="swatch swatch__blue--darker">darker</div>
<h3>o-buttons</h3>
<a class="o-buttons o-buttons--info">Info</a>
<a class="o-buttons o-buttons--success">Success</a>
<a class="o-buttons o-buttons--warning">Warning</a>
<a class="o-buttons o-buttons--error">Error</a>
<h3>o-alerts</h3>
<div class="o-alerts o-alerts--info">Info</div>
<div class="o-alerts o-alerts--success">Success</div>
<div class="o-alerts o-alerts--warning">Warning</div>
<div class="o-alerts o-alerts--error">Error</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment