Skip to content

Instantly share code, notes, and snippets.

@jnslxndr

jnslxndr/SassMeister-input-HTML.html

Created August 8, 2014 13:24
Show Gist options
  • Save jnslxndr/112ec629b61b5e9db3c2 to your computer and use it in GitHub Desktop.
Save jnslxndr/112ec629b61b5e9db3c2 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<header>
<nav role="main">
Navigation
<aside>
<section>test</section>
<section class="secondary">test 2</section>
<section class="tools">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</section>
</aside>
</nav>
</header>
<section role="main">
<ul class="content-list">
<li>
<ul>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<footer>
<section class="attributions">
Copyright, etc
</section>
</footer>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// Singularity.gs (v1.2.0.rc.6)
// ----
@import "singularitygs";
@include add-grid(3 5 8 12 16 1 1 1 1 1 1 1);
@include sgs-change('debug', true);
@include sgs-change('background grid color', #ddd);
*,*:before,*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
@include background-grid();
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
header {
@include grid-span(12,1);
& > nav {
@include grid-span(10,2);
@include layout(5 8 12 16 1 1 1 1 1 1) {
@include background-grid($color: orange);
aside {
background: orange;
@include grid-span(9,2);
@include layout(8 12 16 1 1 1 1 1 1) {
@include background-grid($color:blue);
section:first-child {
@include grid-span(1,2);
}
section.secondary {
@include grid-span(1,3);
}
section.tools
{
@include grid-span(6,4);
@include layout(1 1 1 1 1 1) {
@include background-grid($color: orange);
@for $i from 1 through 6 {
span:nth-child(#{$i}) {
@include grid-span(1,$i);
}
}
}
}
}
}
}
}
}
footer {
background: blue;
position: fixed;
bottom: 0;
@include grid-span(12,1);
text-align: right;
padding: 0 1em;
}
section[role="main"] {
@include grid-span(10,2);
margin-top: 3em;
}
Raw
SassMeister-output.css
*, *:before, *:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-image: linear-gradient(to right, #dddddd 0%, #dddddd 5.5814%, #e5e5e5 5.5814%, #e5e5e5 6.04651%, #dddddd 6.04651%, #dddddd 15.34884%, #e5e5e5 15.34884%, #e5e5e5 15.81395%, #dddddd 15.81395%, #dddddd 30.69767%, #e5e5e5 30.69767%, #e5e5e5 31.16279%, #dddddd 31.16279%, #dddddd 53.48837%, #e5e5e5 53.48837%, #e5e5e5 53.95349%, #dddddd 53.95349%, #dddddd 83.72093%, #e5e5e5 83.72093%, #e5e5e5 84.18605%, #dddddd 84.18605%, #dddddd 86.04651%, #e5e5e5 86.04651%, #e5e5e5 86.51163%, #dddddd 86.51163%, #dddddd 88.37209%, #e5e5e5 88.37209%, #e5e5e5 88.83721%, #dddddd 88.83721%, #dddddd 90.69767%, #e5e5e5 90.69767%, #e5e5e5 91.16279%, #dddddd 91.16279%, #dddddd 93.02326%, #e5e5e5 93.02326%, #e5e5e5 93.48837%, #dddddd 93.48837%, #dddddd 95.34884%, #e5e5e5 95.34884%, #e5e5e5 95.81395%, #dddddd 95.81395%, #dddddd 97.67442%, #e5e5e5 97.67442%, #e5e5e5 98.13953%, #dddddd 98.13953%, #dddddd);
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
header {
-sgs-span-settings: ("span": 12, "location": 1, "grid": 3 5 8 12 16 1 1 1 1 1 1 1, "gutter": 0.25, "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;
}
header > nav {
-sgs-span-settings: ("span": 10, "location": 2, "grid": 3 5 8 12 16 1 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 91.62791%;
float: left;
margin-right: -100%;
margin-left: 6.04651%;
clear: none;
background-image: linear-gradient(to right, orange 0%, orange 10.15228%, #ffbb3f 10.15228%, #ffbb3f 10.6599%, orange 10.6599%, orange 26.90355%, #ffbb3f 26.90355%, #ffbb3f 27.41117%, orange 27.41117%, orange 51.77665%, #ffbb3f 51.77665%, #ffbb3f 52.28426%, orange 52.28426%, orange 84.77157%, #ffbb3f 84.77157%, #ffbb3f 85.27919%, orange 85.27919%, orange 87.30964%, #ffbb3f 87.30964%, #ffbb3f 87.81726%, orange 87.81726%, orange 89.84772%, #ffbb3f 89.84772%, #ffbb3f 90.35533%, orange 90.35533%, orange 92.38579%, #ffbb3f 92.38579%, #ffbb3f 92.8934%, orange 92.8934%, orange 94.92386%, #ffbb3f 94.92386%, #ffbb3f 95.43147%, orange 95.43147%, orange 97.46193%, #ffbb3f 97.46193%, #ffbb3f 97.96954%, orange 97.96954%, orange);
}
header > nav aside {
background: orange;
-sgs-span-settings: ("span": 9, "location": 2, "grid": 5 8 12 16 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 89.3401%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background-image: linear-gradient(to right, blue 0%, blue 18.18182%, #3f3fff 18.18182%, #3f3fff 18.75%, blue 18.75%, blue 46.02273%, #3f3fff 46.02273%, #3f3fff 46.59091%, blue 46.59091%, blue 82.95455%, #3f3fff 82.95455%, #3f3fff 83.52273%, blue 83.52273%, blue 85.79545%, #3f3fff 85.79545%, #3f3fff 86.36364%, blue 86.36364%, blue 88.63636%, #3f3fff 88.63636%, #3f3fff 89.20455%, blue 89.20455%, blue 91.47727%, #3f3fff 91.47727%, #3f3fff 92.04545%, blue 92.04545%, blue 94.31818%, #3f3fff 94.31818%, #3f3fff 94.88636%, blue 94.88636%, blue 97.15909%, #3f3fff 97.15909%, #3f3fff 97.72727%, blue 97.72727%, blue);
}
header > nav aside section:first-child {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 8 12 16 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 27.27273%;
float: left;
margin-right: -100%;
margin-left: 18.75%;
clear: none;
}
header > nav aside section.secondary {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 8 12 16 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 36.36364%;
float: left;
margin-right: -100%;
margin-left: 46.59091%;
clear: none;
}
header > nav aside section.tools {
-sgs-span-settings: ("span": 6, "location": 4, "grid": 8 12 16 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 16.47727%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background-image: linear-gradient(to right, orange 0%, orange 13.7931%, #ffbb3f 13.7931%, #ffbb3f 17.24138%, orange 17.24138%, orange 31.03448%, #ffbb3f 31.03448%, #ffbb3f 34.48276%, orange 34.48276%, orange 48.27586%, #ffbb3f 48.27586%, #ffbb3f 51.72414%, orange 51.72414%, orange 65.51724%, #ffbb3f 65.51724%, #ffbb3f 68.96552%, orange 68.96552%, orange 82.75862%, #ffbb3f 82.75862%, #ffbb3f 86.2069%, orange 86.2069%, orange);
}
header > nav aside section.tools span:nth-child(1) {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 13.7931%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
header > nav aside section.tools span:nth-child(2) {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 13.7931%;
float: left;
margin-right: -100%;
margin-left: 17.24138%;
clear: none;
}
header > nav aside section.tools span:nth-child(3) {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 13.7931%;
float: left;
margin-right: -100%;
margin-left: 34.48276%;
clear: none;
}
header > nav aside section.tools span:nth-child(4) {
-sgs-span-settings: ("span": 1, "location": 4, "grid": 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 13.7931%;
float: left;
margin-right: -100%;
margin-left: 51.72414%;
clear: none;
}
header > nav aside section.tools span:nth-child(5) {
-sgs-span-settings: ("span": 1, "location": 5, "grid": 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 13.7931%;
float: left;
margin-right: -100%;
margin-left: 68.96552%;
clear: none;
}
header > nav aside section.tools span:nth-child(6) {
-sgs-span-settings: ("span": 1, "location": 6, "grid": 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 13.7931%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
footer {
background: blue;
position: fixed;
bottom: 0;
-sgs-span-settings: ("span": 12, "location": 1, "grid": 3 5 8 12 16 1 1 1 1 1 1 1, "gutter": 0.25, "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;
text-align: right;
padding: 0 1em;
}
section[role="main"] {
-sgs-span-settings: ("span": 10, "location": 2, "grid": 3 5 8 12 16 1 1 1 1 1 1 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 91.62791%;
float: left;
margin-right: -100%;
margin-left: 6.04651%;
clear: none;
margin-top: 3em;
}
Raw
SassMeister-rendered.html
<header>
<nav role="main">
Navigation
<aside>
<section>test</section>
<section class="secondary">test 2</section>
<section class="tools">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</section>
</aside>
</nav>
</header>
<section role="main">
<ul class="content-list">
<li>
<ul>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
<li>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<footer>
<section class="attributions">
Copyright, etc
</section>
</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment