Skip to content

Instantly share code, notes, and snippets.

@jnslxndr

jnslxndr/SassMeister-input-HTML.html

Created August 8, 2014 14:05
Show Gist options
  • Save jnslxndr/e2343446ed2eaeaf6576 to your computer and use it in GitHub Desktop.
Save jnslxndr/e2343446ed2eaeaf6576 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><div>test item root level</div></li>
<li>
<div>group on root level</div>
<ul>
<li>item one level down</li>
<li>
<div>group one level down</div>
<ul>
<li>inner child 1 1</li>
<li>inner child 2 1</li>
</ul>
</li>
<li>
<div>group one level down</div>
<ul>
<li>inner child 1</li>
<li>
<div>group one level down</div>
<ul>
<li>inner child 1</li>
<li>
<div>group one level down</div>
<ul>
<li>inner child 1</li>
<li>
<div>group one level down</div>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</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(14);
@include sgs-change('debug', true);
@include sgs-change('background grid color', #ddd);
*,*:before,*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
@include background-grid();
}
header {
@include grid-span(12,2);
@include layout(12) {
@include background-grid($color: green);
& > nav {
@include grid-span(10,1);
@include layout(10) {
@include background-grid($color: red);
aside {
height: 20px;
@include grid-span(6,5);
@include layout(6) {
@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(3,4);
@include layout($grid:6,$gutter: 1/2) {
@include background-grid($color: orange);
@for $i from 1 through 6 {
span:nth-child(#{$i}) {
@include grid-span(1,$i);
background: white;
text-align: center;
}
}
}
}
}
}
}
}
}
}
footer {
background: blue;
position: fixed;
bottom: 0;
@include grid-span(12,2);
text-align: right;
padding: 0 1em;
}
ul {
//background: rgba(255,0,0,0.2);
width: auto;
}
li {
//background: rgba(0,255,255,0.2);
width: auto;
}
section[role="main"] {
margin-top: 3em;
@include grid-span(12,2);
& > ul.content-list > li {
@include layout($grid: 24,$gutter: 1/1.75) {
@include grid-span(24,1);
@include background-grid($color: blue);
& > ul > li {
@include grid-span(23,2);
@include layout(23) {
@include background-grid($color: green);
& > ul > li {
@include grid-span(22,2);
@include layout(22) {
@include background-grid($color: orange);
& ul > li {
@include grid-span(21,2);
@include layout(21) {
@include background-grid($color: #ff018d);
& > ul > li {
@include grid-span(20,2);
@include layout(20) {
@include background-grid($color: red);
& > ul > li {
@include grid-span(19,2);
@include layout(19) {
@include background-grid($color: silver);
& > ul > li {
@include grid-span(18,2);
@include layout(18) {
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
Raw
SassMeister-output.css
*, *:before, *:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
background-image: linear-gradient(to right, #dddddd 0%, #dddddd 5.7971014493%, #e5e5e5 5.7971014493%, #e5e5e5 7.2463768116%, #dddddd 7.2463768116%, #dddddd 13.0434782609%, #e5e5e5 13.0434782609%, #e5e5e5 14.4927536232%, #dddddd 14.4927536232%, #dddddd 20.2898550725%, #e5e5e5 20.2898550725%, #e5e5e5 21.7391304348%, #dddddd 21.7391304348%, #dddddd 27.5362318841%, #e5e5e5 27.5362318841%, #e5e5e5 28.9855072464%, #dddddd 28.9855072464%, #dddddd 34.7826086957%, #e5e5e5 34.7826086957%, #e5e5e5 36.231884058%, #dddddd 36.231884058%, #dddddd 42.0289855072%, #e5e5e5 42.0289855072%, #e5e5e5 43.4782608696%, #dddddd 43.4782608696%, #dddddd 49.2753623188%, #e5e5e5 49.2753623188%, #e5e5e5 50.7246376812%, #dddddd 50.7246376812%, #dddddd 56.5217391304%, #e5e5e5 56.5217391304%, #e5e5e5 57.9710144928%, #dddddd 57.9710144928%, #dddddd 63.768115942%, #e5e5e5 63.768115942%, #e5e5e5 65.2173913043%, #dddddd 65.2173913043%, #dddddd 71.0144927536%, #e5e5e5 71.0144927536%, #e5e5e5 72.4637681159%, #dddddd 72.4637681159%, #dddddd 78.2608695652%, #e5e5e5 78.2608695652%, #e5e5e5 79.7101449275%, #dddddd 79.7101449275%, #dddddd 85.5072463768%, #e5e5e5 85.5072463768%, #e5e5e5 86.9565217391%, #dddddd 86.9565217391%, #dddddd 92.7536231884%, #e5e5e5 92.7536231884%, #e5e5e5 94.2028985507%, #dddddd 94.2028985507%, #dddddd);
}
header {
-sgs-span-settings: ("span": 12, "location": 2, "grid": 14, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 85.5072463768%;
float: left;
margin-right: -100%;
margin-left: 7.2463768116%;
clear: none;
background-image: linear-gradient(to right, green 0%, green 6.7796610169%, #3f9f3f 6.7796610169%, #3f9f3f 8.4745762712%, green 8.4745762712%, green 15.2542372881%, #3f9f3f 15.2542372881%, #3f9f3f 16.9491525424%, green 16.9491525424%, green 23.7288135593%, #3f9f3f 23.7288135593%, #3f9f3f 25.4237288136%, green 25.4237288136%, green 32.2033898305%, #3f9f3f 32.2033898305%, #3f9f3f 33.8983050847%, green 33.8983050847%, green 40.6779661017%, #3f9f3f 40.6779661017%, #3f9f3f 42.3728813559%, green 42.3728813559%, green 49.1525423729%, #3f9f3f 49.1525423729%, #3f9f3f 50.8474576271%, green 50.8474576271%, green 57.6271186441%, #3f9f3f 57.6271186441%, #3f9f3f 59.3220338983%, green 59.3220338983%, green 66.1016949153%, #3f9f3f 66.1016949153%, #3f9f3f 67.7966101695%, green 67.7966101695%, green 74.5762711864%, #3f9f3f 74.5762711864%, #3f9f3f 76.2711864407%, green 76.2711864407%, green 83.0508474576%, #3f9f3f 83.0508474576%, #3f9f3f 84.7457627119%, green 84.7457627119%, green 91.5254237288%, #3f9f3f 91.5254237288%, #3f9f3f 93.2203389831%, green 93.2203389831%, green);
}
header > nav {
-sgs-span-settings: ("span": 10, "location": 1, "grid": 12, "gutter": 0.25, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 83.0508474576%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
background-image: linear-gradient(to right, red 0%, red 8.1632653061%, #ff3f3f 8.1632653061%, #ff3f3f 10.2040816327%, red 10.2040816327%, red 18.3673469388%, #ff3f3f 18.3673469388%, #ff3f3f 20.4081632653%, red 20.4081632653%, red 28.5714285714%, #ff3f3f 28.5714285714%, #ff3f3f 30.612244898%, red 30.612244898%, red 38.7755102041%, #ff3f3f 38.7755102041%, #ff3f3f 40.8163265306%, red 40.8163265306%, red 48.9795918367%, #ff3f3f 48.9795918367%, #ff3f3f 51.0204081633%, red 51.0204081633%, red 59.1836734694%, #ff3f3f 59.1836734694%, #ff3f3f 61.2244897959%, red 61.2244897959%, red 69.387755102%, #ff3f3f 69.387755102%, #ff3f3f 71.4285714286%, red 71.4285714286%, red 79.5918367347%, #ff3f3f 79.5918367347%, #ff3f3f 81.6326530612%, red 81.6326530612%, red 89.7959183673%, #ff3f3f 89.7959183673%, #ff3f3f 91.8367346939%, red 91.8367346939%, red);
}
header > nav aside {
height: 20px;
-sgs-span-settings: ("span": 6, "location": 5, "grid": 10, "gutter": 0.25, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 59.1836734694%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background-image: linear-gradient(to right, blue 0%, blue 13.7931034483%, #3f3fff 13.7931034483%, #3f3fff 17.2413793103%, blue 17.2413793103%, blue 31.0344827586%, #3f3fff 31.0344827586%, #3f3fff 34.4827586207%, blue 34.4827586207%, blue 48.275862069%, #3f3fff 48.275862069%, #3f3fff 51.724137931%, blue 51.724137931%, blue 65.5172413793%, #3f3fff 65.5172413793%, #3f3fff 68.9655172414%, blue 68.9655172414%, blue 82.7586206897%, #3f3fff 82.7586206897%, #3f3fff 86.2068965517%, blue 86.2068965517%, blue);
}
header > nav aside section:first-child {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 6, "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.7931034483%;
float: left;
margin-right: -100%;
margin-left: 17.2413793103%;
clear: none;
}
header > nav aside section.secondary {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 6, "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.7931034483%;
float: left;
margin-right: -100%;
margin-left: 34.4827586207%;
clear: none;
}
header > nav aside section.tools {
-sgs-span-settings: ("span": 3, "location": 4, "grid": 6, "gutter": 0.25, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 48.275862069%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background-image: linear-gradient(to right, orange 0%, orange 11.7647058824%, #ffbb3f 11.7647058824%, #ffbb3f 17.6470588235%, orange 17.6470588235%, orange 29.4117647059%, #ffbb3f 29.4117647059%, #ffbb3f 35.2941176471%, orange 35.2941176471%, orange 47.0588235294%, #ffbb3f 47.0588235294%, #ffbb3f 52.9411764706%, orange 52.9411764706%, orange 64.7058823529%, #ffbb3f 64.7058823529%, #ffbb3f 70.5882352941%, orange 70.5882352941%, orange 82.3529411765%, #ffbb3f 82.3529411765%, #ffbb3f 88.2352941176%, orange 88.2352941176%, orange);
}
header > nav aside section.tools span:nth-child(1) {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 6, "gutter": 0.5, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 11.7647058824%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
background: white;
text-align: center;
}
header > nav aside section.tools span:nth-child(2) {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 6, "gutter": 0.5, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 11.7647058824%;
float: left;
margin-right: -100%;
margin-left: 17.6470588235%;
clear: none;
background: white;
text-align: center;
}
header > nav aside section.tools span:nth-child(3) {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 6, "gutter": 0.5, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 11.7647058824%;
float: left;
margin-right: -100%;
margin-left: 35.2941176471%;
clear: none;
background: white;
text-align: center;
}
header > nav aside section.tools span:nth-child(4) {
-sgs-span-settings: ("span": 1, "location": 4, "grid": 6, "gutter": 0.5, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 11.7647058824%;
float: left;
margin-right: -100%;
margin-left: 52.9411764706%;
clear: none;
background: white;
text-align: center;
}
header > nav aside section.tools span:nth-child(5) {
-sgs-span-settings: ("span": 1, "location": 5, "grid": 6, "gutter": 0.5, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 11.7647058824%;
float: left;
margin-right: -100%;
margin-left: 70.5882352941%;
clear: none;
background: white;
text-align: center;
}
header > nav aside section.tools span:nth-child(6) {
-sgs-span-settings: ("span": 1, "location": 6, "grid": 6, "gutter": 0.5, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 11.7647058824%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background: white;
text-align: center;
}
footer {
background: blue;
position: fixed;
bottom: 0;
-sgs-span-settings: ("span": 12, "location": 2, "grid": 14, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 85.5072463768%;
float: left;
margin-right: -100%;
margin-left: 7.2463768116%;
clear: none;
text-align: right;
padding: 0 1em;
}
ul {
width: auto;
}
li {
width: auto;
}
section[role="main"] {
margin-top: 3em;
-sgs-span-settings: ("span": 12, "location": 2, "grid": 14, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 85.5072463768%;
float: left;
margin-right: -100%;
margin-left: 7.2463768116%;
clear: none;
}
section[role="main"] > ul.content-list > li {
-sgs-span-settings: ("span": 24, "location": 1, "grid": 24, "gutter": 0.5714285714, "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;
background-image: linear-gradient(to right, blue 0%, blue 2.6923076923%, #3f3fff 2.6923076923%, #3f3fff 4.2307692308%, blue 4.2307692308%, blue 6.9230769231%, #3f3fff 6.9230769231%, #3f3fff 8.4615384615%, blue 8.4615384615%, blue 11.1538461538%, #3f3fff 11.1538461538%, #3f3fff 12.6923076923%, blue 12.6923076923%, blue 15.3846153846%, #3f3fff 15.3846153846%, #3f3fff 16.9230769231%, blue 16.9230769231%, blue 19.6153846154%, #3f3fff 19.6153846154%, #3f3fff 21.1538461538%, blue 21.1538461538%, blue 23.8461538462%, #3f3fff 23.8461538462%, #3f3fff 25.3846153846%, blue 25.3846153846%, blue 28.0769230769%, #3f3fff 28.0769230769%, #3f3fff 29.6153846154%, blue 29.6153846154%, blue 32.3076923077%, #3f3fff 32.3076923077%, #3f3fff 33.8461538462%, blue 33.8461538462%, blue 36.5384615385%, #3f3fff 36.5384615385%, #3f3fff 38.0769230769%, blue 38.0769230769%, blue 40.7692307692%, #3f3fff 40.7692307692%, #3f3fff 42.3076923077%, blue 42.3076923077%, blue 45.0%, #3f3fff 45.0%, #3f3fff 46.5384615385%, blue 46.5384615385%, blue 49.2307692308%, #3f3fff 49.2307692308%, #3f3fff 50.7692307692%, blue 50.7692307692%, blue 53.4615384615%, #3f3fff 53.4615384615%, #3f3fff 55.0%, blue 55.0%, blue 57.6923076923%, #3f3fff 57.6923076923%, #3f3fff 59.2307692308%, blue 59.2307692308%, blue 61.9230769231%, #3f3fff 61.9230769231%, #3f3fff 63.4615384615%, blue 63.4615384615%, blue 66.1538461538%, #3f3fff 66.1538461538%, #3f3fff 67.6923076923%, blue 67.6923076923%, blue 70.3846153846%, #3f3fff 70.3846153846%, #3f3fff 71.9230769231%, blue 71.9230769231%, blue 74.6153846154%, #3f3fff 74.6153846154%, #3f3fff 76.1538461538%, blue 76.1538461538%, blue 78.8461538462%, #3f3fff 78.8461538462%, #3f3fff 80.3846153846%, blue 80.3846153846%, blue 83.0769230769%, #3f3fff 83.0769230769%, #3f3fff 84.6153846154%, blue 84.6153846154%, blue 87.3076923077%, #3f3fff 87.3076923077%, #3f3fff 88.8461538462%, blue 88.8461538462%, blue 91.5384615385%, #3f3fff 91.5384615385%, #3f3fff 93.0769230769%, blue 93.0769230769%, blue 95.7692307692%, #3f3fff 95.7692307692%, #3f3fff 97.3076923077%, blue 97.3076923077%, blue);
}
section[role="main"] > ul.content-list > li > ul > li {
-sgs-span-settings: ("span": 23, "location": 2, "grid": 24, "gutter": 0.5714285714, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 95.7692307692%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background-image: linear-gradient(to right, green 0%, green 2.8112449799%, #3f9f3f 2.8112449799%, #3f9f3f 4.4176706827%, green 4.4176706827%, green 7.2289156627%, #3f9f3f 7.2289156627%, #3f9f3f 8.8353413655%, green 8.8353413655%, green 11.6465863454%, #3f9f3f 11.6465863454%, #3f9f3f 13.2530120482%, green 13.2530120482%, green 16.0642570281%, #3f9f3f 16.0642570281%, #3f9f3f 17.6706827309%, green 17.6706827309%, green 20.4819277108%, #3f9f3f 20.4819277108%, #3f9f3f 22.0883534137%, green 22.0883534137%, green 24.8995983936%, #3f9f3f 24.8995983936%, #3f9f3f 26.5060240964%, green 26.5060240964%, green 29.3172690763%, #3f9f3f 29.3172690763%, #3f9f3f 30.9236947791%, green 30.9236947791%, green 33.734939759%, #3f9f3f 33.734939759%, #3f9f3f 35.3413654618%, green 35.3413654618%, green 38.1526104418%, #3f9f3f 38.1526104418%, #3f9f3f 39.7590361446%, green 39.7590361446%, green 42.5702811245%, #3f9f3f 42.5702811245%, #3f9f3f 44.1767068273%, green 44.1767068273%, green 46.9879518072%, #3f9f3f 46.9879518072%, #3f9f3f 48.59437751%, green 48.59437751%, green 51.40562249%, #3f9f3f 51.40562249%, #3f9f3f 53.0120481928%, green 53.0120481928%, green 55.8232931727%, #3f9f3f 55.8232931727%, #3f9f3f 57.4297188755%, green 57.4297188755%, green 60.2409638554%, #3f9f3f 60.2409638554%, #3f9f3f 61.8473895582%, green 61.8473895582%, green 64.6586345382%, #3f9f3f 64.6586345382%, #3f9f3f 66.265060241%, green 66.265060241%, green 69.0763052209%, #3f9f3f 69.0763052209%, #3f9f3f 70.6827309237%, green 70.6827309237%, green 73.4939759036%, #3f9f3f 73.4939759036%, #3f9f3f 75.1004016064%, green 75.1004016064%, green 77.9116465863%, #3f9f3f 77.9116465863%, #3f9f3f 79.5180722892%, green 79.5180722892%, green 82.3293172691%, #3f9f3f 82.3293172691%, #3f9f3f 83.9357429719%, green 83.9357429719%, green 86.7469879518%, #3f9f3f 86.7469879518%, #3f9f3f 88.3534136546%, green 88.3534136546%, green 91.1646586345%, #3f9f3f 91.1646586345%, #3f9f3f 92.7710843373%, green 92.7710843373%, green 95.5823293173%, #3f9f3f 95.5823293173%, #3f9f3f 97.1887550201%, green 97.1887550201%, green);
}
section[role="main"] > ul.content-list > li > ul > li > ul > li {
-sgs-span-settings: ("span": 22, "location": 2, "grid": 23, "gutter": 0.5714285714, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 95.5823293173%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background-image: linear-gradient(to right, orange 0%, orange 2.9411764706%, #ffbb3f 2.9411764706%, #ffbb3f 4.6218487395%, orange 4.6218487395%, orange 7.5630252101%, #ffbb3f 7.5630252101%, #ffbb3f 9.243697479%, orange 9.243697479%, orange 12.1848739496%, #ffbb3f 12.1848739496%, #ffbb3f 13.8655462185%, orange 13.8655462185%, orange 16.8067226891%, #ffbb3f 16.8067226891%, #ffbb3f 18.487394958%, orange 18.487394958%, orange 21.4285714286%, #ffbb3f 21.4285714286%, #ffbb3f 23.1092436975%, orange 23.1092436975%, orange 26.0504201681%, #ffbb3f 26.0504201681%, #ffbb3f 27.731092437%, orange 27.731092437%, orange 30.6722689076%, #ffbb3f 30.6722689076%, #ffbb3f 32.3529411765%, orange 32.3529411765%, orange 35.2941176471%, #ffbb3f 35.2941176471%, #ffbb3f 36.974789916%, orange 36.974789916%, orange 39.9159663866%, #ffbb3f 39.9159663866%, #ffbb3f 41.5966386555%, orange 41.5966386555%, orange 44.5378151261%, #ffbb3f 44.5378151261%, #ffbb3f 46.218487395%, orange 46.218487395%, orange 49.1596638655%, #ffbb3f 49.1596638655%, #ffbb3f 50.8403361345%, orange 50.8403361345%, orange 53.781512605%, #ffbb3f 53.781512605%, #ffbb3f 55.4621848739%, orange 55.4621848739%, orange 58.4033613445%, #ffbb3f 58.4033613445%, #ffbb3f 60.0840336134%, orange 60.0840336134%, orange 63.025210084%, #ffbb3f 63.025210084%, #ffbb3f 64.7058823529%, orange 64.7058823529%, orange 67.6470588235%, #ffbb3f 67.6470588235%, #ffbb3f 69.3277310924%, orange 69.3277310924%, orange 72.268907563%, #ffbb3f 72.268907563%, #ffbb3f 73.9495798319%, orange 73.9495798319%, orange 76.8907563025%, #ffbb3f 76.8907563025%, #ffbb3f 78.5714285714%, orange 78.5714285714%, orange 81.512605042%, #ffbb3f 81.512605042%, #ffbb3f 83.1932773109%, orange 83.1932773109%, orange 86.1344537815%, #ffbb3f 86.1344537815%, #ffbb3f 87.8151260504%, orange 87.8151260504%, orange 90.756302521%, #ffbb3f 90.756302521%, #ffbb3f 92.4369747899%, orange 92.4369747899%, orange 95.3781512605%, #ffbb3f 95.3781512605%, #ffbb3f 97.0588235294%, orange 97.0588235294%, orange);
}
section[role="main"] > ul.content-list > li > ul > li > ul > li ul > li {
-sgs-span-settings: ("span": 21, "location": 2, "grid": 22, "gutter": 0.5714285714, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 95.3781512605%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background-image: linear-gradient(to right, #ff018d 0%, #ff018d 3.0837004405%, #ff40a9 3.0837004405%, #ff40a9 4.845814978%, #ff018d 4.845814978%, #ff018d 7.9295154185%, #ff40a9 7.9295154185%, #ff40a9 9.6916299559%, #ff018d 9.6916299559%, #ff018d 12.7753303965%, #ff40a9 12.7753303965%, #ff40a9 14.5374449339%, #ff018d 14.5374449339%, #ff018d 17.6211453744%, #ff40a9 17.6211453744%, #ff40a9 19.3832599119%, #ff018d 19.3832599119%, #ff018d 22.4669603524%, #ff40a9 22.4669603524%, #ff40a9 24.2290748899%, #ff018d 24.2290748899%, #ff018d 27.3127753304%, #ff40a9 27.3127753304%, #ff40a9 29.0748898678%, #ff018d 29.0748898678%, #ff018d 32.1585903084%, #ff40a9 32.1585903084%, #ff40a9 33.9207048458%, #ff018d 33.9207048458%, #ff018d 37.0044052863%, #ff40a9 37.0044052863%, #ff40a9 38.7665198238%, #ff018d 38.7665198238%, #ff018d 41.8502202643%, #ff40a9 41.8502202643%, #ff40a9 43.6123348018%, #ff018d 43.6123348018%, #ff018d 46.6960352423%, #ff40a9 46.6960352423%, #ff40a9 48.4581497797%, #ff018d 48.4581497797%, #ff018d 51.5418502203%, #ff40a9 51.5418502203%, #ff40a9 53.3039647577%, #ff018d 53.3039647577%, #ff018d 56.3876651982%, #ff40a9 56.3876651982%, #ff40a9 58.1497797357%, #ff018d 58.1497797357%, #ff018d 61.2334801762%, #ff40a9 61.2334801762%, #ff40a9 62.9955947137%, #ff018d 62.9955947137%, #ff018d 66.0792951542%, #ff40a9 66.0792951542%, #ff40a9 67.8414096916%, #ff018d 67.8414096916%, #ff018d 70.9251101322%, #ff40a9 70.9251101322%, #ff40a9 72.6872246696%, #ff018d 72.6872246696%, #ff018d 75.7709251101%, #ff40a9 75.7709251101%, #ff40a9 77.5330396476%, #ff018d 77.5330396476%, #ff018d 80.6167400881%, #ff40a9 80.6167400881%, #ff40a9 82.3788546256%, #ff018d 82.3788546256%, #ff018d 85.4625550661%, #ff40a9 85.4625550661%, #ff40a9 87.2246696035%, #ff018d 87.2246696035%, #ff018d 90.3083700441%, #ff40a9 90.3083700441%, #ff40a9 92.0704845815%, #ff018d 92.0704845815%, #ff018d 95.154185022%, #ff40a9 95.154185022%, #ff40a9 96.9162995595%, #ff018d 96.9162995595%, #ff018d);
}
section[role="main"] > ul.content-list > li > ul > li > ul > li ul > li > ul > li {
-sgs-span-settings: ("span": 20, "location": 2, "grid": 21, "gutter": 0.5714285714, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 95.154185022%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background-image: linear-gradient(to right, red 0%, red 3.2407407407%, #ff3f3f 3.2407407407%, #ff3f3f 5.0925925926%, red 5.0925925926%, red 8.3333333333%, #ff3f3f 8.3333333333%, #ff3f3f 10.1851851852%, red 10.1851851852%, red 13.4259259259%, #ff3f3f 13.4259259259%, #ff3f3f 15.2777777778%, red 15.2777777778%, red 18.5185185185%, #ff3f3f 18.5185185185%, #ff3f3f 20.3703703704%, red 20.3703703704%, red 23.6111111111%, #ff3f3f 23.6111111111%, #ff3f3f 25.462962963%, red 25.462962963%, red 28.7037037037%, #ff3f3f 28.7037037037%, #ff3f3f 30.5555555556%, red 30.5555555556%, red 33.7962962963%, #ff3f3f 33.7962962963%, #ff3f3f 35.6481481481%, red 35.6481481481%, red 38.8888888889%, #ff3f3f 38.8888888889%, #ff3f3f 40.7407407407%, red 40.7407407407%, red 43.9814814815%, #ff3f3f 43.9814814815%, #ff3f3f 45.8333333333%, red 45.8333333333%, red 49.0740740741%, #ff3f3f 49.0740740741%, #ff3f3f 50.9259259259%, red 50.9259259259%, red 54.1666666667%, #ff3f3f 54.1666666667%, #ff3f3f 56.0185185185%, red 56.0185185185%, red 59.2592592593%, #ff3f3f 59.2592592593%, #ff3f3f 61.1111111111%, red 61.1111111111%, red 64.3518518519%, #ff3f3f 64.3518518519%, #ff3f3f 66.2037037037%, red 66.2037037037%, red 69.4444444444%, #ff3f3f 69.4444444444%, #ff3f3f 71.2962962963%, red 71.2962962963%, red 74.537037037%, #ff3f3f 74.537037037%, #ff3f3f 76.3888888889%, red 76.3888888889%, red 79.6296296296%, #ff3f3f 79.6296296296%, #ff3f3f 81.4814814815%, red 81.4814814815%, red 84.7222222222%, #ff3f3f 84.7222222222%, #ff3f3f 86.5740740741%, red 86.5740740741%, red 89.8148148148%, #ff3f3f 89.8148148148%, #ff3f3f 91.6666666667%, red 91.6666666667%, red 94.9074074074%, #ff3f3f 94.9074074074%, #ff3f3f 96.7592592593%, red 96.7592592593%, red);
}
section[role="main"] > ul.content-list > li > ul > li > ul > li ul > li > ul > li > ul > li {
-sgs-span-settings: ("span": 19, "location": 2, "grid": 20, "gutter": 0.5714285714, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 94.9074074074%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background-image: linear-gradient(to right, silver 0%, silver 3.4146341463%, #cfcfcf 3.4146341463%, #cfcfcf 5.3658536585%, silver 5.3658536585%, silver 8.7804878049%, #cfcfcf 8.7804878049%, #cfcfcf 10.7317073171%, silver 10.7317073171%, silver 14.1463414634%, #cfcfcf 14.1463414634%, #cfcfcf 16.0975609756%, silver 16.0975609756%, silver 19.512195122%, #cfcfcf 19.512195122%, #cfcfcf 21.4634146341%, silver 21.4634146341%, silver 24.8780487805%, #cfcfcf 24.8780487805%, #cfcfcf 26.8292682927%, silver 26.8292682927%, silver 30.243902439%, #cfcfcf 30.243902439%, #cfcfcf 32.1951219512%, silver 32.1951219512%, silver 35.6097560976%, #cfcfcf 35.6097560976%, #cfcfcf 37.5609756098%, silver 37.5609756098%, silver 40.9756097561%, #cfcfcf 40.9756097561%, #cfcfcf 42.9268292683%, silver 42.9268292683%, silver 46.3414634146%, #cfcfcf 46.3414634146%, #cfcfcf 48.2926829268%, silver 48.2926829268%, silver 51.7073170732%, #cfcfcf 51.7073170732%, #cfcfcf 53.6585365854%, silver 53.6585365854%, silver 57.0731707317%, #cfcfcf 57.0731707317%, #cfcfcf 59.0243902439%, silver 59.0243902439%, silver 62.4390243902%, #cfcfcf 62.4390243902%, #cfcfcf 64.3902439024%, silver 64.3902439024%, silver 67.8048780488%, #cfcfcf 67.8048780488%, #cfcfcf 69.756097561%, silver 69.756097561%, silver 73.1707317073%, #cfcfcf 73.1707317073%, #cfcfcf 75.1219512195%, silver 75.1219512195%, silver 78.5365853659%, #cfcfcf 78.5365853659%, #cfcfcf 80.487804878%, silver 80.487804878%, silver 83.9024390244%, #cfcfcf 83.9024390244%, #cfcfcf 85.8536585366%, silver 85.8536585366%, silver 89.2682926829%, #cfcfcf 89.2682926829%, #cfcfcf 91.2195121951%, silver 91.2195121951%, silver 94.6341463415%, #cfcfcf 94.6341463415%, #cfcfcf 96.5853658537%, silver 96.5853658537%, silver);
}
section[role="main"] > ul.content-list > li > ul > li > ul > li ul > li > ul > li > ul > li > ul > li {
-sgs-span-settings: ("span": 18, "location": 2, "grid": 19, "gutter": 0.5714285714, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 94.6341463415%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
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><div>test item root level</div></li>
<li>
<div>group on root level</div>
<ul>
<li>item one level down</li>
<li>
<div>group one level down</div>
<ul>
<li>inner child 1 1</li>
<li>inner child 2 1</li>
</ul>
</li>
<li>
<div>group one level down</div>
<ul>
<li>inner child 1</li>
<li>
<div>group one level down</div>
<ul>
<li>inner child 1</li>
<li>
<div>group one level down</div>
<ul>
<li>inner child 1</li>
<li>
<div>group one level down</div>
<ul>
<li>inner child 1</li>
<li>inner child 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</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