Skip to content

Instantly share code, notes, and snippets.

@ianhobbs

ianhobbs/SassMeister-input-HTML.html

Created May 24, 2014 12:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ianhobbs/11b0f9423ba01632dbe8 to your computer and use it in GitHub Desktop.
Save ianhobbs/11b0f9423ba01632dbe8 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<div class="main">
<div class="full">
<h1>This is the center thing</h1>
</div>
<div class="g-patch">
<h3>something about love</h3>
</div>
<div class="smile">
<h3>something about love</h3>
</div>
<div class="black">
<h3>something about love</h3>
</div>
</div>
</body>
Raw
SassMeister-input.sass
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// Susy (v2.1.2)
// ----
@import compass
@import susy
$max: 14
$susy:(columns: $max, gutter-position: inside, math: fluid, output: float, flow: ltr)
.main
@include global-box-sizing(border-box)
@include container($max)
@include bleed-x(1em)
background-color: pink
height: 100%
@include show-grid(overlay)
.full
@include span(7 of $max)
@include push(7)
background-color: RGB(12,140,200)
.g-patch
@include span(7 of $max)
background-color: RGB(43,220,200)
.black
@include span($max of $max no-gutters)
@include bleed-x(1em)
background-color: RGB(40,40,40)
color: white
.smile
@include span(9 last)
@include squish(15%)
background-color: RGB(83,83,83)
Raw
SassMeister-output.css
.main {
max-width: 100%;
margin-left: auto;
margin-right: auto;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
margin-right: -1em;
margin-left: -1em;
padding-right: 1em;
padding-left: 1em;
background-color: pink;
height: 100%;
}
.main *, .main *:before, .main *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.main:after {
content: " ";
display: block;
clear: both;
}
head {
display: block;
position: fixed;
right: 10px;
top: 10px;
z-index: 999;
color: #333;
background: rgba(255, 255, 255, 0.25);
}
head:before {
content: "|||";
display: block;
padding: 5px 10px;
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
}
head:hover {
background: rgba(255, 255, 255, 0.5);
color: red;
}
head:hover ~ .main, head:hover ~ body .main {
position: relative;
}
head:hover ~ .main:before, head:hover ~ body .main:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: " ";
z-index: 998;
}
.main .full {
width: 50%;
float: left;
padding-left: 0.71429%;
padding-right: 0.71429%;
margin-left: 50%;
background-color: RGB(12, 140, 200);
}
.main .g-patch {
width: 50%;
float: left;
padding-left: 0.71429%;
padding-right: 0.71429%;
background-color: RGB(43, 220, 200);
}
.main .black {
width: 100%;
float: left;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
margin-right: -1em;
margin-left: -1em;
padding-right: 1em;
padding-left: 1em;
background-color: RGB(40, 40, 40);
color: white;
}
.main .smile {
width: 64.28571%;
float: right;
padding-left: 0.71429%;
padding-right: 0.71429%;
margin-left: 15%;
margin-right: 15%;
background-color: RGB(83, 83, 83);
}
Raw
SassMeister-rendered.html
<body>
<div class="main">
<div class="full">
<h1>This is the center thing</h1>
</div>
<div class="g-patch">
<h3>something about love</h3>
</div>
<div class="smile">
<h3>something about love</h3>
</div>
<div class="black">
<h3>something about love</h3>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment