Skip to content

Instantly share code, notes, and snippets.

@starryeyez024

starryeyez024/SassMeister-input-HTML.html

Last active August 29, 2015 14:09
Show Gist options
  • Save starryeyez024/c81ca7a65348d5eebe0f to your computer and use it in GitHub Desktop.
Save starryeyez024/c81ca7a65348d5eebe0f to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<ul>
<li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li>
<li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li>
<li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li><li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li><li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li>
<li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
</ul>
</li>
<li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li>
</ul>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
ul{
-webkit-column-count: 7; /* Chrome, Safari, Opera */
-moz-column-count: 7; /* Firefox */
column-count: 7;
}
ul ul{
-webkit-column-count: 1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
column-count: 1;
padding: 1em;
}
.primary{
color: RED;
padding: 1em;
background: #eee;
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-o-column-break-inside:avoid;
-ms-column-break-inside:avoid;
column-break-inside:avoid;
}
Raw
SassMeister-output.css
ul {
-webkit-column-count: 7;
/* Chrome, Safari, Opera */
-moz-column-count: 7;
/* Firefox */
column-count: 7;
}
ul ul {
-webkit-column-count: 1;
/* Chrome, Safari, Opera */
-moz-column-count: 1;
/* Firefox */
column-count: 1;
padding: 1em;
}
.primary {
color: RED;
padding: 1em;
background: #eee;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
}
Raw
SassMeister-rendered.html
<ul>
<li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li>
<li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li>
<li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li><li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li><li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li>
<li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
</ul>
</li>
<li class="primary">Mercedem aut
<ul>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
<li class="secondary">Mercedem aut</li>
</ul>
</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment