Skip to content

Instantly share code, notes, and snippets.

@jens-a-e

jens-a-e/SassMeister-input-HTML.html

Created August 8, 2014 13:15
Show Gist options
  • Save jens-a-e/4651150a6383adbaf2c7 to your computer and use it in GitHub Desktop.
Save jens-a-e/4651150a6383adbaf2c7 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>test 2</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 {
background: red;
@include grid-span(12,1);
& > nav {
@include grid-span(10,2);
//@include layout(5 8 12 16 1 1 1 1 1 1) {
//@include add-grid(5 8 12 16 1 1 1 1 1 1);
//}
@include background-grid($color: yellow);
//background: yellow;
aside {
background: orange;
@include layout(5 8 12 16 1 1 1 1 1 1) {
@include grid-span(3,2);
@include add-grid(8 12 16);
@include background-grid($color:blue);
section:first-child {
@include grid-span(1,2);
}
section:last-child {
@include grid-span(1,3);
}
}
}
}
}
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 {
background: red;
-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, yellow 0%, yellow 5.5814%, #ffff3f 5.5814%, #ffff3f 6.04651%, yellow 6.04651%, yellow 15.34884%, #ffff3f 15.34884%, #ffff3f 15.81395%, yellow 15.81395%, yellow 30.69767%, #ffff3f 30.69767%, #ffff3f 31.16279%, yellow 31.16279%, yellow 53.48837%, #ffff3f 53.48837%, #ffff3f 53.95349%, yellow 53.95349%, yellow 83.72093%, #ffff3f 83.72093%, #ffff3f 84.18605%, yellow 84.18605%, yellow 86.04651%, #ffff3f 86.04651%, #ffff3f 86.51163%, yellow 86.51163%, yellow 88.37209%, #ffff3f 88.37209%, #ffff3f 88.83721%, yellow 88.83721%, yellow 90.69767%, #ffff3f 90.69767%, #ffff3f 91.16279%, yellow 91.16279%, yellow 93.02326%, #ffff3f 93.02326%, #ffff3f 93.48837%, yellow 93.48837%, yellow 95.34884%, #ffff3f 95.34884%, #ffff3f 95.81395%, yellow 95.81395%, yellow 97.67442%, #ffff3f 97.67442%, #ffff3f 98.13953%, yellow 98.13953%, yellow);
}
header > nav aside {
background: orange;
-sgs-span-settings: ("span": 3, "location": 2, "grid": 5 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: 74.11168%;
float: left;
margin-right: -100%;
margin-left: 10.6599%;
clear: none;
background-image: linear-gradient(to right, blue 0%, blue 21.91781%, #3f3fff 21.91781%, #3f3fff 22.60274%, blue 22.60274%, blue 55.47945%, #3f3fff 55.47945%, #3f3fff 56.16438%, blue 56.16438%, blue);
}
header > nav aside section:first-child {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 8 12 16, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 32.87671%;
float: left;
margin-right: -100%;
margin-left: 22.60274%;
clear: none;
}
header > nav aside section:last-child {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 8 12 16, "gutter": 0.25, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 43.83562%;
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>test 2</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