Skip to content

Instantly share code, notes, and snippets.

@antonnid

antonnid/SassMeister-input-HTML.html

Created May 18, 2015 19:58
Show Gist options
  • Save antonnid/33644bf2c332a33288af to your computer and use it in GitHub Desktop.
Save antonnid/33644bf2c332a33288af to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<body>
<section class="hero">
<img src="http://placehold.it/1024x664">
</section>
<section class="linkbox">
<nav>
<img src="http://placehold.it/320x164">
<img src="http://placehold.it/320x164">
<img src="http://placehold.it/320x164">
</nav>
</section>
</body>
</html>
Raw
SassMeister-input.sass
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----
@import susy
$susy: (columns: 12, gutter-position: split)
body
//@include container(show)
margin-top: 0
section.hero
+full
background-color: black
img
+span(8)
+push(2)
//margin: 0 auto
max-width: 100%
height: auto
section.linkbox
//+container(show)
+full
background-color: #062d3d
nav
+container
+span(8)
+push(2)
img
+span(3 wider)
max-width: 100%
height: auto
Raw
SassMeister-output.css
body {
margin-top: 0;
}
section.hero {
clear: both;
width: 98.33333%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
background-color: black;
}
section.hero img {
width: 65%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
margin-left: 17.5%;
max-width: 100%;
height: auto;
}
section.linkbox {
clear: both;
width: 98.33333%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
background-color: #062d3d;
}
section.linkbox nav {
max-width: 100%;
margin-left: auto;
margin-right: auto;
width: 65%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
margin-left: 17.5%;
}
section.linkbox nav:after {
content: " ";
display: block;
clear: both;
}
section.linkbox nav img {
width: 26.66667%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
max-width: 100%;
height: auto;
}
Raw
SassMeister-rendered.html
<html>
<body>
<section class="hero">
<img src="http://placehold.it/1024x664">
</section>
<section class="linkbox">
<nav>
<img src="http://placehold.it/320x164">
<img src="http://placehold.it/320x164">
<img src="http://placehold.it/320x164">
</nav>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment