Skip to content

Instantly share code, notes, and snippets.

@Undistraction

Undistraction/SassMeister-input-HTML.html

Last active August 29, 2015 14:27
Show Gist options
  • Save Undistraction/ca6c98a20af59db34cfc to your computer and use it in GitHub Desktop.
Save Undistraction/ca6c98a20af59db34cfc to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<p>ul</p>
<ul>
<li>Alpha</li>
<li>Beta</li>
<li>Charlie</li>
<li>Delta</li>
</ul>
<hr>
<p>UIList</p>
<ul class="UIList">
<li class="UIList-li">Alpha</li>
<li class="UIList-li">Beta</li>
<li class="UIList-li">Charlie</li>
<li class="UIList-li">Delta</li>
</ul>
<hr>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
$unit: 20px;
ul {
padding: 0;
margin-left: $unit;
}
.UIList {
margin-left: 0;
list-style: none;
&-li {
list-syle: none;
}
&--horizontal {
.UIList-li {
float: left;
}
}
}
Raw
SassMeister-output.css
ul {
padding: 0;
margin-left: 20px;
}
.UIList {
margin-left: 0;
list-style: none;
}
.UIList-li {
list-syle: none;
}
.UIList--horizontal .UIList-li {
float: left;
}
Raw
SassMeister-rendered.html
<p>ul</p>
<ul>
<li>Alpha</li>
<li>Beta</li>
<li>Charlie</li>
<li>Delta</li>
</ul>
<hr>
<p>UIList</p>
<ul class="UIList">
<li class="UIList-li">Alpha</li>
<li class="UIList-li">Beta</li>
<li class="UIList-li">Charlie</li>
<li class="UIList-li">Delta</li>
</ul>
<hr>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment