Skip to content

Instantly share code, notes, and snippets.

@philwolstenholme

philwolstenholme/SassMeister-input-HTML.html

Created January 21, 2016 16:39
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 philwolstenholme/535c628e8935a0576364 to your computer and use it in GitHub Desktop.
Save philwolstenholme/535c628e8935a0576364 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="box">Kinda works</div>
</div>
<div class="container">
<div class="box">Shame the gutter is applied with padding rather than a margin though</div>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
@import "singularitygs";
// settings.scss
@include add-grid(12);
@include add-gutter-style('split');
@include add-gutter(2em);
@include sgs-change('debug', true);
body {
@include background-grid();
margin: gutter-span();
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
&:nth-child(1n) {
@include grid-span(6, 1);
padding-left: 0;
}
&:nth-child(2n) {
@include grid-span(6, 7);
padding-right: 0;
}
}
.box {
padding: gutter-span();
background-color: rgba(255,255,255,0.5);
height: 95vh;
}
Raw
SassMeister-output.css
body {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%220%25%22%20fill%3D%22chocolate%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%228%2E33333%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%228%2E33333%25%22%20fill%3D%22%23b3591a%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2216%2E66667%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2216%2E66667%25%22%20fill%3D%22chocolate%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2225%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2225%25%22%20fill%3D%22%23b3591a%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2233%2E33333%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2233%2E33333%25%22%20fill%3D%22chocolate%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2241%2E66667%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2241%2E66667%25%22%20fill%3D%22%23b3591a%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%25%22%20fill%3D%22chocolate%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2258%2E33333%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2258%2E33333%25%22%20fill%3D%22%23b3591a%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2266%2E66667%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2266%2E66667%25%22%20fill%3D%22chocolate%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2275%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2275%25%22%20fill%3D%22%23b3591a%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2283%2E33333%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2283%2E33333%25%22%20fill%3D%22chocolate%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2291%2E66667%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2291%2E66667%25%22%20fill%3D%22%23b3591a%22%20width%3D%228%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%22100%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
margin: 2em;
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
}
.container:nth-child(1n) {
-sgs-span-settings: ("span": 6, "location": 1, "grid": 12, "gutter": 2em, "style": "split", "start row": true, "end row": false, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": (null: null));
width: 50%;
float: left;
margin-right: -100%;
clear: none;
padding-left: 1em;
padding-right: 1em;
padding-left: 0;
}
.container:nth-child(2n) {
-sgs-span-settings: ("span": 6, "location": 7, "grid": 12, "gutter": 2em, "style": "split", "start row": false, "end row": true, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": (null: null));
width: 50%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-left: 1em;
padding-right: 1em;
padding-right: 0;
}
.box {
padding: 2em;
background-color: rgba(255, 255, 255, 0.5);
height: 95vh;
}
Raw
SassMeister-rendered.html
<div class="container">
<div class="box">Kinda works</div>
</div>
<div class="container">
<div class="box">Shame the gutter is applied with padding rather than a margin though</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment