Skip to content

Instantly share code, notes, and snippets.

@carwin

carwin/SassMeister-input-HTML.html

Created February 12, 2016 03:16
Show Gist options
  • Save carwin/71ce1bfbc3a3899ae7af to your computer and use it in GitHub Desktop.
Save carwin/71ce1bfbc3a3899ae7af to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="container">
<div class="A"><img src="http://placehold.it/1000x500" /></div>
<div class="B">
<div class="C"><img src="http://placehold.it/500x500" /></div>
<div class="D"><img src="http://placehold.it/500x500" /></div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@import "susy";
.container {
width: 1000px;
margin: 0 auto;
}
.A,
.B {
@include span(12 of 12);
padding: 0 20px;
}
.A {
margin-bottom: gutter(12);
}
.C,
.D {
@include span(6 of 12);
}
.D {
@include last;
}
Raw
SassMeister-output.css
.container {
width: 1000px;
margin: 0 auto;
}
.A,
.B {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
padding: 0 20px;
}
.A {
margin-bottom: 1.69492%;
}
.C,
.D {
width: 49.15254%;
float: left;
margin-right: 1.69492%;
}
.D {
float: right;
margin-right: 0;
}
Raw
SassMeister-rendered.html
<div class="container">
<div class="A"><img src="http://placehold.it/1000x500" /></div>
<div class="B">
<div class="C"><img src="http://placehold.it/500x500" /></div>
<div class="D"><img src="http://placehold.it/500x500" /></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment