Skip to content

Instantly share code, notes, and snippets.

@jnslxndr

jnslxndr/SassMeister-input-HTML.html

Created August 10, 2014 10:01
Show Gist options
  • Save jnslxndr/afa750704431956f137f to your computer and use it in GitHub Desktop.
Save jnslxndr/afa750704431956f137f to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<div class="main">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">
<ul>
<li class="a">Three A</li>
<li class="b">Three B</li>
<li class="c">Three C</li>
</ul>
</div>
<div class="four">Four</div>
</div>
<div class="first">First Section</div>
<div class="second">Second Section</div>
</body>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// Breakpoint (v2.4.6)
// Singularity Extras (v1.0.0.alpha.3)
// Singularity.gs (v1.2.0.rc.6)
// ----
@import "breakpoint";
@import "singularitygs";
@import "singularity-extras";
@include sgs-change('debug', true);
$bp-medium: 900px;
@include add-grid(1);
@include add-grid(1 4 1 at $bp-medium);
@include add-gutter(1/6);
@include add-gutter-style(split at $bp-medium);
*,*:before,*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
@include background-grid();
height: 1024px;
}
.main {
@include grid-span(1, 1);
clear: both;
@include breakpoint($bp-medium) {
@include grid-span(1, 2);
clear: none;
}
}
.first {
@include grid-span(1, 1);
clear: both;
@include breakpoint($bp-medium) {
@include grid-span(1, 1);
clear: none;
}
}
.second {
@include grid-span(1, 1);
clear: both;
@include breakpoint($bp-medium) {
@include grid-span(1, 3);
clear: none;
}
}
@include layout(8, 1/6) {
//@include add-gutter-style(opposite);
.main {
//@include background-grid();
overflow: hidden;
& > * {
background: rgba(0,0,255,0.2);
margin-bottom: .1em;
}
}
.one {
@include grid-span(1, 1);
@include breakpoint($bp-medium) {
@include grid-span(1, 3);
}
background: rgba(0,255,255,0.2);
}
.two {
@include grid-span(1, 2);
@include breakpoint($bp-medium) {
@include grid-span(1, 7);
}
}
.three {
// make it $gutter: 0 so content can span up to width+gutter
@include grid-span(5, 1);
@include breakpoint($bp-medium) {
@include grid-span(5, 3,$gutter: 0);
clear: both;
}
//height: 16px; & * { display: none; }
}
.four {
//@include grid-span(2, 4);
@include breakpoint($bp-medium) {
@include grid-span(2, 4);
clear: both;
}
}
}
@include breakpoint($bp-medium) {
// snap must add up to parent grid-span!
@include layout(snap(1 2 2, 1/6), 1/6) {
@include add-gutter-style(opposite);
.a {
@include grid-span(1, 1);
background: yellow;
}
.b {
@include grid-span(1, 2);
background: red;
}
.c {
@include grid-span(1, 3);
background: green;
}
}
}
Raw
SassMeister-output.css
*, *:before, *:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-image: linear-gradient(to right, chocolate, chocolate 0%, #dd8e56 0%, #dd8e56 16.66667%);
height: 1024px;
}
@media (min-width: 900px) {
body {
background-image: linear-gradient(to right, #dd8e56, #dd8e56 1.28205%, chocolate 1.28205%, chocolate 16.66667%, #dd8e56 16.66667%, #dd8e56 19.23077%, chocolate 19.23077%, chocolate 80.76923%, #dd8e56 80.76923%, #dd8e56 83.33333%, chocolate 83.33333%, chocolate 98.71795%, #dd8e56 98.71795%, #dd8e56 100.0%);
}
}
.main {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 1, "gutter": 0.16667, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
clear: both;
}
@media (min-width: 900px) {
.main {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 1 4 1, "gutter": 0.16667, "style": split, "start row": false, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
width: 61.53846%;
float: left;
margin-right: -100%;
margin-left: 19.23077%;
clear: none;
clear: none;
}
}
.first {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 1, "gutter": 0.16667, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
clear: both;
}
@media (min-width: 900px) {
.first {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 1 4 1, "gutter": 0.16667, "style": split, "start row": true, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
width: 15.38462%;
float: left;
margin-right: -100%;
margin-left: 1.28205%;
clear: none;
clear: none;
}
}
.second {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 1, "gutter": 0.16667, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
clear: both;
}
@media (min-width: 900px) {
.second {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 1 4 1, "gutter": 0.16667, "style": split, "start row": false, "end row": true, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
width: 15.38462%;
float: right;
margin-left: 0;
margin-right: 1.28205%;
clear: none;
clear: none;
}
}
.main {
overflow: hidden;
}
.main > * {
background: rgba(0, 0, 255, 0.2);
margin-bottom: .1em;
}
.one {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 8, "gutter": 0.16667, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 10.90909%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
background: rgba(0, 255, 255, 0.2);
}
@media (min-width: 900px) {
.one {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 8, "gutter": 0.16667, "style": split, "start row": false, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
width: 10.71429%;
float: left;
margin-right: -100%;
margin-left: 25.89286%;
clear: none;
}
}
.two {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 8, "gutter": 0.16667, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 10.90909%;
float: left;
margin-right: -100%;
margin-left: 12.72727%;
clear: none;
}
@media (min-width: 900px) {
.two {
-sgs-span-settings: ("span": 1, "location": 7, "grid": 8, "gutter": 0.16667, "style": split, "start row": false, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
width: 10.71429%;
float: left;
margin-right: -100%;
margin-left: 75.89286%;
clear: none;
}
}
.three {
-sgs-span-settings: ("span": 5, "location": 1, "grid": 8, "gutter": 0.16667, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 61.81818%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
@media (min-width: 900px) {
.three {
-sgs-span-settings: ("span": 5, "location": 3, "grid": 8, "gutter": 0, "style": split, "start row": false, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
width: 62.5%;
float: left;
margin-right: -100%;
margin-left: 25%;
clear: none;
clear: both;
}
}
@media (min-width: 900px) {
.four {
-sgs-span-settings: ("span": 2, "location": 4, "grid": 8, "gutter": 0.16667, "style": split, "start row": false, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
width: 23.21429%;
float: left;
margin-right: -100%;
margin-left: 38.39286%;
clear: none;
clear: both;
}
}
@media (min-width: 900px) {
.a {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 1 2.16667 2.16667, "gutter": 0.16667, "style": split, "start row": true, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
width: 17.14286%;
float: left;
margin-right: -100%;
margin-left: 1.42857%;
clear: none;
background: yellow;
}
.b {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 1 2.16667 2.16667, "gutter": 0.16667, "style": split, "start row": false, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
width: 37.14286%;
float: left;
margin-right: -100%;
margin-left: 21.42857%;
clear: none;
background: red;
}
.c {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 1 2.16667 2.16667, "gutter": 0.16667, "style": split, "start row": false, "end row": true, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
width: 37.14286%;
float: right;
margin-left: 0;
margin-right: 1.42857%;
clear: none;
background: green;
}
}
Raw
SassMeister-rendered.html
<body>
<div class="main">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">
<ul>
<li class="a">Three A</li>
<li class="b">Three B</li>
<li class="c">Three C</li>
</ul>
</div>
<div class="four">Four</div>
</div>
<div class="first">First Section</div>
<div class="second">Second Section</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment