Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three">
<div class="inner">Hello</div>
<div class="inner-two">Hello Two</div>
</div>
</div>
// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// Singularity Extras (v1.0.0.alpha.3)
// Singularity.gs (v1.2.1)
// ----
@import "singularitygs";
@import "singularity-extras";
@include add-gutter(1 / 3);
@include add-gutter-style("split");
.container {
@include add-grid(24);
height: 80vh;
background: rgba(gray, 0.5);
}
.one {
@include grid-span(1, 1);
height: 80vh;
background: rgba(red, 0.5);
}
.two {
@include grid-span(4, 2);
height: 80vh;
background: rgba(blue, 0.5);
}
.three {
@include grid-span(19, 6);
height: 80vh;
background: rgba(green, 0.5);
.inner{
@include add-grid(12);
@include grid-span(6, 1);
height: 50vh;
background: rgba(purple, 0.5);
&:hover{background: black;}
}
.inner-two{
@include add-grid(12);
@include grid-span(6, 7);
height: 50vh;
background: rgba(brown, 0.5);
}
}
.container {
height: 80vh;
background: rgba(128, 128, 128, 0.5);
}
.one {
width: 3.125%;
float: left;
margin-right: -100%;
margin-left: 0.52083%;
clear: none;
height: 80vh;
background: rgba(255, 0, 0, 0.5);
}
.two {
width: 15.625%;
float: left;
margin-right: -100%;
margin-left: 4.6875%;
clear: none;
height: 80vh;
background: rgba(0, 0, 255, 0.5);
}
.three {
width: 78.125%;
float: right;
margin-left: 0;
margin-right: 0.52083%;
clear: none;
height: 80vh;
background: rgba(0, 128, 0, 0.5);
}
.three .inner {
width: 47.91667%;
float: left;
margin-right: -100%;
margin-left: 1.04167%;
clear: none;
height: 50vh;
background: rgba(128, 0, 128, 0.5);
}
.three .inner:hover {
background: black;
}
.three .inner-two {
width: 47.91667%;
float: right;
margin-left: 0;
margin-right: 1.04167%;
clear: none;
height: 50vh;
background: rgba(165, 42, 42, 0.5);
}
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three">
<div class="inner">Hello</div>
<div class="inner-two">Hello Two</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment