Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="main">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
</div>
<div class="primary-sidebar"></div>
</body>
</html>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Singularity Extras (v1.0.0)
// Singularity.gs (v1.6.2)
// ----
@import "breakpoint";
@import "singularitygs";
@import "singularity-extras";
@include add-grid(200px 24);
@include add-gutter(20px);
@include sgs-change('output', 'calc');
.main {
background: red;
@include grid-span(1, 2);
.col{
background: black;
margin-bottom: 10px;
height: 50vh;
color: white;
&:nth-child(1n){
@include grid-span(1, 1);
}
&:nth-child(1n + 2){
@include grid-span(1, 10);
}
&:nth-child(1n + 3){
@include grid-span(1, 3);
}
}
}
.primary-sidebar {
background: green;
@include grid-span(1, 1);
}
.secondary-sidebar {
background: blue;
@include grid-span(1, 3);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
div {
height: 100vh;
margin: 0;
padding: 0;
}
List index is 3 but list is only 2 items long for `nth'
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="main">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
</div>
<div class="primary-sidebar"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment