Skip to content

Instantly share code, notes, and snippets.

@autovalue

autovalue/SassMeister-input-HTML.html

Created November 20, 2015 13:17
Show Gist options
  • Save autovalue/3df715d105ef8e3bdb6b to your computer and use it in GitHub Desktop.
Save autovalue/3df715d105ef8e3bdb6b to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="gradient vertical-gradient">
test
</div>
<div class="gradient corner-gradient">
test
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
$wf-green: #56d848;
$wf-blue: #0fb2f9; // #0fb2f9 vs 10b2f9
$wf-grey: #595959;
$wf-grey-digital: #6f6f6f;
$wf-cool-grey: #77777a;
$wf-light-grey: #ececec;
$wf-white: #ffffff;
$gradient-original-position: 59.97%;
$gradient-position: 0.99%;
.vertical-gradient {
background: linear-gradient(90deg, $wf-blue $gradient-position, $wf-green);
}
.corner-gradient {
background: linear-gradient(135deg, $wf-blue $gradient-position, $wf-green);
}
.gradient {
width: 175px;
height: 106px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Raw
SassMeister-output.css
.vertical-gradient {
background: linear-gradient(90deg, #0fb2f9 0.99%, #56d848);
}
.corner-gradient {
background: linear-gradient(135deg, #0fb2f9 0.99%, #56d848);
}
.gradient {
width: 175px;
height: 106px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Raw
SassMeister-rendered.html
<div class="gradient vertical-gradient">
test
</div>
<div class="gradient corner-gradient">
test
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment