Skip to content

Instantly share code, notes, and snippets.

@spartDev

spartDev/SassMeister-input-HTML.html

Created April 3, 2014 12:50
Show Gist options
  • Save spartDev/9953708 to your computer and use it in GitHub Desktop.
Save spartDev/9953708 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<ul class="tab">
<li class="tab__item tab__item--current">Tab</li>
<li class="tab__item">Tab</li>
<li class="tab__item">Tab</li>
<li class="tab__item">Tab</li>
</ul>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
* { box-sizing: border-box };
$bc: #444;
$tabSpace: 2px;
.tab {
margin: 0; padding: 0;
list-style-type: none;
border-bottom: 1px solid $bc;
&__item {
display: inline-block;
cursor: pointer;
min-width: 100px;
margin-right: $tabSpace;
border-top: 1px solid $bc;
border-left: 1px solid $bc;
border-right: 1px solid $bc;
text-align: center;
&--current {
position: relative;
&:after {
content:"";
position: absolute;
display: block;
bottom: -1px;
left: 0;
width: 100%;
border-bottom: 2px solid #FFF
}
}
}
}
Raw
SassMeister-output.css
* {
box-sizing: border-box;
}
.tab {
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 1px solid #444444;
}
.tab__item {
display: inline-block;
cursor: pointer;
min-width: 100px;
margin-right: 2px;
border-top: 1px solid #444444;
border-left: 1px solid #444444;
border-right: 1px solid #444444;
text-align: center;
}
.tab__item--current {
position: relative;
}
.tab__item--current:after {
content: "";
position: absolute;
display: block;
bottom: -1px;
left: 0;
width: 100%;
border-bottom: 2px solid white;
}
Raw
SassMeister-rendered.html
<ul class="tab">
<li class="tab__item tab__item--current">Tab</li>
<li class="tab__item">Tab</li>
<li class="tab__item">Tab</li>
<li class="tab__item">Tab</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment