Skip to content

Instantly share code, notes, and snippets.

@gearmobile

gearmobile/SassMeister-input-HTML.html

Created June 11, 2015 11:13
Show Gist options
  • Save gearmobile/bef0f92b17bec5b77f23 to your computer and use it in GitHub Desktop.
Save gearmobile/bef0f92b17bec5b77f23 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="container__part">1</div>
<div class="container__part">2</div>
<div class="container__part">3</div>
<div class="container__part">4</div>
<div class="container__part">5</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Susy (v2.2.5)
// ----
@import "compass";
@import "susy";
$large: 1170px;
$medium: 970px;
$small: 750px;
html {
font-size: 100%;
}
.container {
@include container(99%);
}
.container__part {
@include span(5 of 25);
min-height: 60vh;
background-color: #789;
// DECORATION
text-align: center;
line-height: 60vh;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
font-size: 3rem;
}
.container__part:last-child {
@include last;
}
Raw
SassMeister-output.css
html {
font-size: 100%;
}
.container {
max-width: 99%;
margin-left: auto;
margin-right: auto;
}
.container:after {
content: " ";
display: block;
clear: both;
}
.container__part {
width: 19.35484%;
float: left;
margin-right: 0.80645%;
min-height: 60vh;
background-color: #789;
text-align: center;
line-height: 60vh;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
font-size: 3rem;
}
.container__part:last-child {
float: right;
margin-right: 0;
}
Raw
SassMeister-rendered.html
<div class="container">
<div class="container__part">1</div>
<div class="container__part">2</div>
<div class="container__part">3</div>
<div class="container__part">4</div>
<div class="container__part">5</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment