Skip to content

Instantly share code, notes, and snippets.

@tonyfinlay

tonyfinlay/SassMeister-input-HTML.html

Created August 13, 2015 19:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tonyfinlay/eada38d803b86882d1f0 to your computer and use it in GitHub Desktop.
Save tonyfinlay/eada38d803b86882d1f0 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!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>
Raw
SassMeister-input.scss
// ----
// 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;
}
Raw
SassMeister-output.css
List index is 3 but list is only 2 items long for `nth'
Raw
SassMeister-rendered.html
<!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