Skip to content

Instantly share code, notes, and snippets.

@TexRx

TexRx/SassMeister-input-HTML.html

Last active August 29, 2015 14:09
Show Gist options
  • Save TexRx/96e55d280573d368d984 to your computer and use it in GitHub Desktop.
Save TexRx/96e55d280573d368d984 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<ul class="comma-sep inline list">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
</ul>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
%unstyled-list {
list-style: none;
margin: 0;
padding: 0;
}
%i-b {
display: inline-block;
}
%comma-sep {
&:not(:last-child):after {
content: ",";
margin-right: 0.25em;
}
}
.list {
&.inline {
@extend %unstyled-list;
}
}
.list-item {
.comma-sep & {
@extend %i-b;
@extend %comma-sep;
}
}
Raw
SassMeister-output.css
.list.inline {
list-style: none;
margin: 0;
padding: 0;
}
.comma-sep .list-item {
display: inline-block;
}
.comma-sep .list-item:not(:last-child):after {
content: ",";
margin-right: 0.25em;
}
Raw
SassMeister-rendered.html
<ul class="comma-sep inline list">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment