Skip to content

Instantly share code, notes, and snippets.

@joshuarule

joshuarule/SassMeister-input-HTML.haml

Created October 28, 2014 16:12
Show Gist options
  • Save joshuarule/6e22828ab9fe77820fe6 to your computer and use it in GitHub Desktop.
Save joshuarule/6e22828ab9fe77820fe6 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.haml
.container
.wrap
.box-1
.box-2
.cf
Raw
SassMeister-input.scss
// ----
// libsass (v3.0)
// ----
// $column: golden-ratio(1em, 3) !default !global;
$visual-grid: true;
@import "bourbon/bourbon";
@import "neat/neat";
.container {
@include outer-container;
// background: green;
outline: 1px solid blue;
min-height: 400px;
}
.box-1 {
@include span-columns(4);
outline: 1px solid red;
height: 40px;
}
Raw
SassMeister-output.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body:before {
content: '';
display: inline-block;
background-image: deprecated-webkit-gradient(linear, left top, left bottom, rgba(0, 0, 0, 0) 0, #EEE 0, #EEE 6.17215%, rgba(0, 0, 0, 0) 6.17215%, rgba(0, 0, 0, 0) 8.5298%, #EEE 8.5298%, #EEE 14.70196%, rgba(0, 0, 0, 0) 14.70196%, rgba(0, 0, 0, 0) 17.05961%, #EEE 17.05961%, #EEE 23.23176%, rgba(0, 0, 0, 0) 23.23176%, rgba(0, 0, 0, 0) 25.58941%, #EEE 25.58941%, #EEE 31.76157%, rgba(0, 0, 0, 0) 31.76157%, rgba(0, 0, 0, 0) 34.11922%, #EEE 34.11922%, #EEE 40.29137%, rgba(0, 0, 0, 0) 40.29137%, rgba(0, 0, 0, 0) 42.64902%, #EEE 42.64902%, #EEE 48.82117%, rgba(0, 0, 0, 0) 48.82117%, rgba(0, 0, 0, 0) 51.17883%, #EEE 51.17883%, #EEE 57.35098%, rgba(0, 0, 0, 0) 57.35098%, rgba(0, 0, 0, 0) 59.70863%, #EEE 59.70863%, #EEE 65.88078%, rgba(0, 0, 0, 0) 65.88078%, rgba(0, 0, 0, 0) 68.23843%, #EEE 68.23843%, #EEE 74.41059%, rgba(0, 0, 0, 0) 74.41059%, rgba(0, 0, 0, 0) 76.76824%, #EEE 76.76824%, #EEE 82.94039%, rgba(0, 0, 0, 0) 82.94039%, rgba(0, 0, 0, 0) 85.29804%, #EEE 85.29804%, #EEE 91.4702%, rgba(0, 0, 0, 0) 91.4702%, rgba(0, 0, 0, 0) 93.82785%, #EEE 93.82785%, #EEE 100%, rgba(0, 0, 0, 0) 100%);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, #EEE 0, #EEE 6.17215%, rgba(0, 0, 0, 0) 6.17215%, rgba(0, 0, 0, 0) 8.5298%, #EEE 8.5298%, #EEE 14.70196%, rgba(0, 0, 0, 0) 14.70196%, rgba(0, 0, 0, 0) 17.05961%, #EEE 17.05961%, #EEE 23.23176%, rgba(0, 0, 0, 0) 23.23176%, rgba(0, 0, 0, 0) 25.58941%, #EEE 25.58941%, #EEE 31.76157%, rgba(0, 0, 0, 0) 31.76157%, rgba(0, 0, 0, 0) 34.11922%, #EEE 34.11922%, #EEE 40.29137%, rgba(0, 0, 0, 0) 40.29137%, rgba(0, 0, 0, 0) 42.64902%, #EEE 42.64902%, #EEE 48.82117%, rgba(0, 0, 0, 0) 48.82117%, rgba(0, 0, 0, 0) 51.17883%, #EEE 51.17883%, #EEE 57.35098%, rgba(0, 0, 0, 0) 57.35098%, rgba(0, 0, 0, 0) 59.70863%, #EEE 59.70863%, #EEE 65.88078%, rgba(0, 0, 0, 0) 65.88078%, rgba(0, 0, 0, 0) 68.23843%, #EEE 68.23843%, #EEE 74.41059%, rgba(0, 0, 0, 0) 74.41059%, rgba(0, 0, 0, 0) 76.76824%, #EEE 76.76824%, #EEE 82.94039%, rgba(0, 0, 0, 0) 82.94039%, rgba(0, 0, 0, 0) 85.29804%, #EEE 85.29804%, #EEE 91.4702%, rgba(0, 0, 0, 0) 91.4702%, rgba(0, 0, 0, 0) 93.82785%, #EEE 93.82785%, #EEE 100%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0, #EEE 0, #EEE 6.17215%, rgba(0, 0, 0, 0) 6.17215%, rgba(0, 0, 0, 0) 8.5298%, #EEE 8.5298%, #EEE 14.70196%, rgba(0, 0, 0, 0) 14.70196%, rgba(0, 0, 0, 0) 17.05961%, #EEE 17.05961%, #EEE 23.23176%, rgba(0, 0, 0, 0) 23.23176%, rgba(0, 0, 0, 0) 25.58941%, #EEE 25.58941%, #EEE 31.76157%, rgba(0, 0, 0, 0) 31.76157%, rgba(0, 0, 0, 0) 34.11922%, #EEE 34.11922%, #EEE 40.29137%, rgba(0, 0, 0, 0) 40.29137%, rgba(0, 0, 0, 0) 42.64902%, #EEE 42.64902%, #EEE 48.82117%, rgba(0, 0, 0, 0) 48.82117%, rgba(0, 0, 0, 0) 51.17883%, #EEE 51.17883%, #EEE 57.35098%, rgba(0, 0, 0, 0) 57.35098%, rgba(0, 0, 0, 0) 59.70863%, #EEE 59.70863%, #EEE 65.88078%, rgba(0, 0, 0, 0) 65.88078%, rgba(0, 0, 0, 0) 68.23843%, #EEE 68.23843%, #EEE 74.41059%, rgba(0, 0, 0, 0) 74.41059%, rgba(0, 0, 0, 0) 76.76824%, #EEE 76.76824%, #EEE 82.94039%, rgba(0, 0, 0, 0) 82.94039%, rgba(0, 0, 0, 0) 85.29804%, #EEE 85.29804%, #EEE 91.4702%, rgba(0, 0, 0, 0) 91.4702%, rgba(0, 0, 0, 0) 93.82785%, #EEE 93.82785%, #EEE 100%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0, #EEE 0, #EEE 6.17215%, rgba(0, 0, 0, 0) 6.17215%, rgba(0, 0, 0, 0) 8.5298%, #EEE 8.5298%, #EEE 14.70196%, rgba(0, 0, 0, 0) 14.70196%, rgba(0, 0, 0, 0) 17.05961%, #EEE 17.05961%, #EEE 23.23176%, rgba(0, 0, 0, 0) 23.23176%, rgba(0, 0, 0, 0) 25.58941%, #EEE 25.58941%, #EEE 31.76157%, rgba(0, 0, 0, 0) 31.76157%, rgba(0, 0, 0, 0) 34.11922%, #EEE 34.11922%, #EEE 40.29137%, rgba(0, 0, 0, 0) 40.29137%, rgba(0, 0, 0, 0) 42.64902%, #EEE 42.64902%, #EEE 48.82117%, rgba(0, 0, 0, 0) 48.82117%, rgba(0, 0, 0, 0) 51.17883%, #EEE 51.17883%, #EEE 57.35098%, rgba(0, 0, 0, 0) 57.35098%, rgba(0, 0, 0, 0) 59.70863%, #EEE 59.70863%, #EEE 65.88078%, rgba(0, 0, 0, 0) 65.88078%, rgba(0, 0, 0, 0) 68.23843%, #EEE 68.23843%, #EEE 74.41059%, rgba(0, 0, 0, 0) 74.41059%, rgba(0, 0, 0, 0) 76.76824%, #EEE 76.76824%, #EEE 82.94039%, rgba(0, 0, 0, 0) 82.94039%, rgba(0, 0, 0, 0) 85.29804%, #EEE 85.29804%, #EEE 91.4702%, rgba(0, 0, 0, 0) 91.4702%, rgba(0, 0, 0, 0) 93.82785%, #EEE 93.82785%, #EEE 100%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0, #EEE 0, #EEE 6.17215%, rgba(0, 0, 0, 0) 6.17215%, rgba(0, 0, 0, 0) 8.5298%, #EEE 8.5298%, #EEE 14.70196%, rgba(0, 0, 0, 0) 14.70196%, rgba(0, 0, 0, 0) 17.05961%, #EEE 17.05961%, #EEE 23.23176%, rgba(0, 0, 0, 0) 23.23176%, rgba(0, 0, 0, 0) 25.58941%, #EEE 25.58941%, #EEE 31.76157%, rgba(0, 0, 0, 0) 31.76157%, rgba(0, 0, 0, 0) 34.11922%, #EEE 34.11922%, #EEE 40.29137%, rgba(0, 0, 0, 0) 40.29137%, rgba(0, 0, 0, 0) 42.64902%, #EEE 42.64902%, #EEE 48.82117%, rgba(0, 0, 0, 0) 48.82117%, rgba(0, 0, 0, 0) 51.17883%, #EEE 51.17883%, #EEE 57.35098%, rgba(0, 0, 0, 0) 57.35098%, rgba(0, 0, 0, 0) 59.70863%, #EEE 59.70863%, #EEE 65.88078%, rgba(0, 0, 0, 0) 65.88078%, rgba(0, 0, 0, 0) 68.23843%, #EEE 68.23843%, #EEE 74.41059%, rgba(0, 0, 0, 0) 74.41059%, rgba(0, 0, 0, 0) 76.76824%, #EEE 76.76824%, #EEE 82.94039%, rgba(0, 0, 0, 0) 82.94039%, rgba(0, 0, 0, 0) 85.29804%, #EEE 85.29804%, #EEE 91.4702%, rgba(0, 0, 0, 0) 91.4702%, rgba(0, 0, 0, 0) 93.82785%, #EEE 93.82785%, #EEE 100%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 0, #EEE 0, #EEE 6.17215%, rgba(0, 0, 0, 0) 6.17215%, rgba(0, 0, 0, 0) 8.5298%, #EEE 8.5298%, #EEE 14.70196%, rgba(0, 0, 0, 0) 14.70196%, rgba(0, 0, 0, 0) 17.05961%, #EEE 17.05961%, #EEE 23.23176%, rgba(0, 0, 0, 0) 23.23176%, rgba(0, 0, 0, 0) 25.58941%, #EEE 25.58941%, #EEE 31.76157%, rgba(0, 0, 0, 0) 31.76157%, rgba(0, 0, 0, 0) 34.11922%, #EEE 34.11922%, #EEE 40.29137%, rgba(0, 0, 0, 0) 40.29137%, rgba(0, 0, 0, 0) 42.64902%, #EEE 42.64902%, #EEE 48.82117%, rgba(0, 0, 0, 0) 48.82117%, rgba(0, 0, 0, 0) 51.17883%, #EEE 51.17883%, #EEE 57.35098%, rgba(0, 0, 0, 0) 57.35098%, rgba(0, 0, 0, 0) 59.70863%, #EEE 59.70863%, #EEE 65.88078%, rgba(0, 0, 0, 0) 65.88078%, rgba(0, 0, 0, 0) 68.23843%, #EEE 68.23843%, #EEE 74.41059%, rgba(0, 0, 0, 0) 74.41059%, rgba(0, 0, 0, 0) 76.76824%, #EEE 76.76824%, #EEE 82.94039%, rgba(0, 0, 0, 0) 82.94039%, rgba(0, 0, 0, 0) 85.29804%, #EEE 85.29804%, #EEE 91.4702%, rgba(0, 0, 0, 0) 91.4702%, rgba(0, 0, 0, 0) 93.82785%, #EEE 93.82785%, #EEE 100%, rgba(0, 0, 0, 0) 100%);
height: 100%;
left: 0;
margin: 0 auto;
max-width: 68em;
opacity: 0.4;
position: fixed;
right: 0;
width: 100%;
pointer-events: none;
z-index: -1; }
.container {
*zoom: 1;
max-width: 68em;
margin-left: auto;
margin-right: auto;
outline: 1px solid blue;
min-height: 400px; }
.container:before, .container:after {
content: " ";
display: table; }
.container:after {
clear: both; }
.box-1 {
float: left;
display: block;
margin-right: 2.35765%;
width: 31.76157%;
outline: 1px solid red;
height: 40px; }
.box-1:last-child {
margin-right: 0; }
Raw
SassMeister-rendered.html
<div class='container'>
<div class='wrap'>
<div class='box-1'></div>
<div class='box-2'></div>
</div>
<div class='cf'></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment