Skip to content

Instantly share code, notes, and snippets.

@eschwartz
Created December 3, 2013 15:23
Show Gist options
  • Save eschwartz/7771049 to your computer and use it in GitHub Desktop.
Save eschwartz/7771049 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<a class="closeBtn">.closeBtn</a>
<div class="acme-app">
<a class="closeBtn">.acme-app .closeBtn</a>
</div>
<div class="acme-app">
<div class="reset">
<a class="closeBtn">.acme-app .reset .closeBtn</a>
</div>
</div>
<div id="global">
<div class="acme-app">
<div class="reset">
<a class="closeBtn" >#global .acme-app .reset .closeBt</a>
</div>
</div>
</div>
<div id="global">
<div id="acme">
<div class="reset">
<a class="closeBtn">#global #acme .reset .closeBtn</a>
</div>
</div>
</div>
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@import "compass";
%superReset {
@include nested-reset;
a {
background: transparent;
color: black;
font-weight: normal;
text-transform: none;
outline: none;
}
}
%baseBtn {
display: inline-block;
padding: 5px 10px;
margin: 10px;
}
.closeBtn, #global .closeBtn {
@extend %baseBtn;
background: blue;
color: white;
font-weight: bold;
text-transform: uppercase;
outline: 8px solid purple;
}
%acmeBtn {
@extend %baseBtn;
background: #fa0;
color: green;
}
.reset {
@extend %superReset;
}
.acme-app, #acme {
.closeBtn {
@extend %acmeBtn;
}
}
.reset div, .reset span, .reset applet, .reset object, .reset iframe,
.reset h1, .reset h2, .reset h3, .reset h4, .reset h5, .reset h6, .reset p, .reset blockquote, .reset pre,
.reset a, .reset abbr, .reset acronym, .reset address, .reset big, .reset cite, .reset code,
.reset del, .reset dfn, .reset em, .reset img, .reset ins, .reset kbd, .reset q, .reset s, .reset samp,
.reset small, .reset strike, .reset strong, .reset sub, .reset sup, .reset tt, .reset var,
.reset b, .reset u, .reset i, .reset center,
.reset dl, .reset dt, .reset dd, .reset ol, .reset ul, .reset li,
.reset fieldset, .reset form, .reset label, .reset legend,
.reset table, .reset caption, .reset tbody, .reset tfoot, .reset thead, .reset tr, .reset th, .reset td,
.reset article, .reset aside, .reset canvas, .reset details, .reset embed,
.reset figure, .reset figcaption, .reset footer, .reset header, .reset hgroup,
.reset menu, .reset nav, .reset output, .reset ruby, .reset section, .reset summary,
.reset time, .reset mark, .reset audio, .reset video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
.reset table {
border-collapse: collapse;
border-spacing: 0;
}
.reset caption, .reset th, .reset td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
.reset q, .reset blockquote {
quotes: none;
}
.reset q:before, .reset q:after, .reset blockquote:before, .reset blockquote:after {
content: "";
content: none;
}
.reset a img {
border: none;
}
.reset a {
background: transparent;
color: black;
font-weight: normal;
text-transform: none;
outline: none;
}
.closeBtn, #global .closeBtn, .acme-app .closeBtn, #acme .closeBtn {
display: inline-block;
padding: 5px 10px;
margin: 10px;
}
.closeBtn, #global .closeBtn {
background: blue;
color: white;
font-weight: bold;
text-transform: uppercase;
outline: 8px solid purple;
}
.acme-app .closeBtn, #acme .closeBtn {
background: #fa0;
color: green;
}
<a class="closeBtn">.closeBtn</a>
<div class="acme-app">
<a class="closeBtn">.acme-app .closeBtn</a>
</div>
<div class="acme-app">
<div class="reset">
<a class="closeBtn">.acme-app .reset .closeBtn</a>
</div>
</div>
<div id="global">
<div class="acme-app">
<div class="reset">
<a class="closeBtn" >#global .acme-app .reset .closeBt</a>
</div>
</div>
</div>
<div id="global">
<div id="acme">
<div class="reset">
<a class="closeBtn">#global #acme .reset .closeBtn</a>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment