Skip to content

Instantly share code, notes, and snippets.

@web-zen

web-zen/SassMeister-input-HTML.html

Created January 11, 2014 22:39
Show Gist options
  • Save web-zen/8377963 to your computer and use it in GitHub Desktop.
Save web-zen/8377963 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Compass Page</title>
</head>
<body class="wrapper">
<section >
<aside></aside>
<article></article>
</section>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Singularity.gs (v1.1.2)
// ----
@import "compass";
@import "singularitygs";
$columns: 1, 2, 3, 4, 5, 6;
html, body{
margin: 0;
padding: 0;
height: 100px;
}
.wrapper{
width: 90%;
margin: 0 auto;
@include background-grid
}
Raw
SassMeister-output.css
html, body {
margin: 0;
padding: 0;
height: 100px;
}
.wrapper {
width: 90%;
margin: 0 auto;
background-image: -moz-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 6.77966%, rgba(210, 105, 30, 0.25) 6.77966%, rgba(210, 105, 30, 0.25) 8.47458%, rgba(210, 105, 30, 0.5) 8.47458%, rgba(210, 105, 30, 0.5) 15.25424%, rgba(210, 105, 30, 0.25) 15.25424%, rgba(210, 105, 30, 0.25) 16.94915%, rgba(210, 105, 30, 0.5) 16.94915%, rgba(210, 105, 30, 0.5) 23.72881%, rgba(210, 105, 30, 0.25) 23.72881%, rgba(210, 105, 30, 0.25) 25.42373%, rgba(210, 105, 30, 0.5) 25.42373%, rgba(210, 105, 30, 0.5) 32.20339%, rgba(210, 105, 30, 0.25) 32.20339%, rgba(210, 105, 30, 0.25) 33.89831%, rgba(210, 105, 30, 0.5) 33.89831%, rgba(210, 105, 30, 0.5) 40.67797%, rgba(210, 105, 30, 0.25) 40.67797%, rgba(210, 105, 30, 0.25) 42.37288%, rgba(210, 105, 30, 0.5) 42.37288%, rgba(210, 105, 30, 0.5) 49.15254%, rgba(210, 105, 30, 0.25) 49.15254%, rgba(210, 105, 30, 0.25) 50.84746%, rgba(210, 105, 30, 0.5) 50.84746%, rgba(210, 105, 30, 0.5) 57.62712%, rgba(210, 105, 30, 0.25) 57.62712%, rgba(210, 105, 30, 0.25) 59.32203%, rgba(210, 105, 30, 0.5) 59.32203%, rgba(210, 105, 30, 0.5) 66.10169%, rgba(210, 105, 30, 0.25) 66.10169%, rgba(210, 105, 30, 0.25) 67.79661%, rgba(210, 105, 30, 0.5) 67.79661%, rgba(210, 105, 30, 0.5) 74.57627%, rgba(210, 105, 30, 0.25) 74.57627%, rgba(210, 105, 30, 0.25) 76.27119%, rgba(210, 105, 30, 0.5) 76.27119%, rgba(210, 105, 30, 0.5) 83.05085%, rgba(210, 105, 30, 0.25) 83.05085%, rgba(210, 105, 30, 0.25) 84.74576%, rgba(210, 105, 30, 0.5) 84.74576%, rgba(210, 105, 30, 0.5) 91.52542%, rgba(210, 105, 30, 0.25) 91.52542%, rgba(210, 105, 30, 0.25) 93.22034%, rgba(210, 105, 30, 0.5) 93.22034%, rgba(210, 105, 30, 0.5) 100%);
background-image: -o-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 6.77966%, rgba(210, 105, 30, 0.25) 6.77966%, rgba(210, 105, 30, 0.25) 8.47458%, rgba(210, 105, 30, 0.5) 8.47458%, rgba(210, 105, 30, 0.5) 15.25424%, rgba(210, 105, 30, 0.25) 15.25424%, rgba(210, 105, 30, 0.25) 16.94915%, rgba(210, 105, 30, 0.5) 16.94915%, rgba(210, 105, 30, 0.5) 23.72881%, rgba(210, 105, 30, 0.25) 23.72881%, rgba(210, 105, 30, 0.25) 25.42373%, rgba(210, 105, 30, 0.5) 25.42373%, rgba(210, 105, 30, 0.5) 32.20339%, rgba(210, 105, 30, 0.25) 32.20339%, rgba(210, 105, 30, 0.25) 33.89831%, rgba(210, 105, 30, 0.5) 33.89831%, rgba(210, 105, 30, 0.5) 40.67797%, rgba(210, 105, 30, 0.25) 40.67797%, rgba(210, 105, 30, 0.25) 42.37288%, rgba(210, 105, 30, 0.5) 42.37288%, rgba(210, 105, 30, 0.5) 49.15254%, rgba(210, 105, 30, 0.25) 49.15254%, rgba(210, 105, 30, 0.25) 50.84746%, rgba(210, 105, 30, 0.5) 50.84746%, rgba(210, 105, 30, 0.5) 57.62712%, rgba(210, 105, 30, 0.25) 57.62712%, rgba(210, 105, 30, 0.25) 59.32203%, rgba(210, 105, 30, 0.5) 59.32203%, rgba(210, 105, 30, 0.5) 66.10169%, rgba(210, 105, 30, 0.25) 66.10169%, rgba(210, 105, 30, 0.25) 67.79661%, rgba(210, 105, 30, 0.5) 67.79661%, rgba(210, 105, 30, 0.5) 74.57627%, rgba(210, 105, 30, 0.25) 74.57627%, rgba(210, 105, 30, 0.25) 76.27119%, rgba(210, 105, 30, 0.5) 76.27119%, rgba(210, 105, 30, 0.5) 83.05085%, rgba(210, 105, 30, 0.25) 83.05085%, rgba(210, 105, 30, 0.25) 84.74576%, rgba(210, 105, 30, 0.5) 84.74576%, rgba(210, 105, 30, 0.5) 91.52542%, rgba(210, 105, 30, 0.25) 91.52542%, rgba(210, 105, 30, 0.25) 93.22034%, rgba(210, 105, 30, 0.5) 93.22034%, rgba(210, 105, 30, 0.5) 100%);
background-image: -webkit-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 6.77966%, rgba(210, 105, 30, 0.25) 6.77966%, rgba(210, 105, 30, 0.25) 8.47458%, rgba(210, 105, 30, 0.5) 8.47458%, rgba(210, 105, 30, 0.5) 15.25424%, rgba(210, 105, 30, 0.25) 15.25424%, rgba(210, 105, 30, 0.25) 16.94915%, rgba(210, 105, 30, 0.5) 16.94915%, rgba(210, 105, 30, 0.5) 23.72881%, rgba(210, 105, 30, 0.25) 23.72881%, rgba(210, 105, 30, 0.25) 25.42373%, rgba(210, 105, 30, 0.5) 25.42373%, rgba(210, 105, 30, 0.5) 32.20339%, rgba(210, 105, 30, 0.25) 32.20339%, rgba(210, 105, 30, 0.25) 33.89831%, rgba(210, 105, 30, 0.5) 33.89831%, rgba(210, 105, 30, 0.5) 40.67797%, rgba(210, 105, 30, 0.25) 40.67797%, rgba(210, 105, 30, 0.25) 42.37288%, rgba(210, 105, 30, 0.5) 42.37288%, rgba(210, 105, 30, 0.5) 49.15254%, rgba(210, 105, 30, 0.25) 49.15254%, rgba(210, 105, 30, 0.25) 50.84746%, rgba(210, 105, 30, 0.5) 50.84746%, rgba(210, 105, 30, 0.5) 57.62712%, rgba(210, 105, 30, 0.25) 57.62712%, rgba(210, 105, 30, 0.25) 59.32203%, rgba(210, 105, 30, 0.5) 59.32203%, rgba(210, 105, 30, 0.5) 66.10169%, rgba(210, 105, 30, 0.25) 66.10169%, rgba(210, 105, 30, 0.25) 67.79661%, rgba(210, 105, 30, 0.5) 67.79661%, rgba(210, 105, 30, 0.5) 74.57627%, rgba(210, 105, 30, 0.25) 74.57627%, rgba(210, 105, 30, 0.25) 76.27119%, rgba(210, 105, 30, 0.5) 76.27119%, rgba(210, 105, 30, 0.5) 83.05085%, rgba(210, 105, 30, 0.25) 83.05085%, rgba(210, 105, 30, 0.25) 84.74576%, rgba(210, 105, 30, 0.5) 84.74576%, rgba(210, 105, 30, 0.5) 91.52542%, rgba(210, 105, 30, 0.25) 91.52542%, rgba(210, 105, 30, 0.25) 93.22034%, rgba(210, 105, 30, 0.5) 93.22034%, rgba(210, 105, 30, 0.5) 100%);
background-image: linear-gradient(to right, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 6.77966%, rgba(210, 105, 30, 0.25) 6.77966%, rgba(210, 105, 30, 0.25) 8.47458%, rgba(210, 105, 30, 0.5) 8.47458%, rgba(210, 105, 30, 0.5) 15.25424%, rgba(210, 105, 30, 0.25) 15.25424%, rgba(210, 105, 30, 0.25) 16.94915%, rgba(210, 105, 30, 0.5) 16.94915%, rgba(210, 105, 30, 0.5) 23.72881%, rgba(210, 105, 30, 0.25) 23.72881%, rgba(210, 105, 30, 0.25) 25.42373%, rgba(210, 105, 30, 0.5) 25.42373%, rgba(210, 105, 30, 0.5) 32.20339%, rgba(210, 105, 30, 0.25) 32.20339%, rgba(210, 105, 30, 0.25) 33.89831%, rgba(210, 105, 30, 0.5) 33.89831%, rgba(210, 105, 30, 0.5) 40.67797%, rgba(210, 105, 30, 0.25) 40.67797%, rgba(210, 105, 30, 0.25) 42.37288%, rgba(210, 105, 30, 0.5) 42.37288%, rgba(210, 105, 30, 0.5) 49.15254%, rgba(210, 105, 30, 0.25) 49.15254%, rgba(210, 105, 30, 0.25) 50.84746%, rgba(210, 105, 30, 0.5) 50.84746%, rgba(210, 105, 30, 0.5) 57.62712%, rgba(210, 105, 30, 0.25) 57.62712%, rgba(210, 105, 30, 0.25) 59.32203%, rgba(210, 105, 30, 0.5) 59.32203%, rgba(210, 105, 30, 0.5) 66.10169%, rgba(210, 105, 30, 0.25) 66.10169%, rgba(210, 105, 30, 0.25) 67.79661%, rgba(210, 105, 30, 0.5) 67.79661%, rgba(210, 105, 30, 0.5) 74.57627%, rgba(210, 105, 30, 0.25) 74.57627%, rgba(210, 105, 30, 0.25) 76.27119%, rgba(210, 105, 30, 0.5) 76.27119%, rgba(210, 105, 30, 0.5) 83.05085%, rgba(210, 105, 30, 0.25) 83.05085%, rgba(210, 105, 30, 0.25) 84.74576%, rgba(210, 105, 30, 0.5) 84.74576%, rgba(210, 105, 30, 0.5) 91.52542%, rgba(210, 105, 30, 0.25) 91.52542%, rgba(210, 105, 30, 0.25) 93.22034%, rgba(210, 105, 30, 0.5) 93.22034%, rgba(210, 105, 30, 0.5) 100%);
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Compass Page</title>
</head>
<body class="wrapper">
<section >
<aside></aside>
<article></article>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment