Skip to content

Instantly share code, notes, and snippets.

@CheetoMao
Created October 3, 2014 16:44
Show Gist options
  • Save CheetoMao/dd67a4f69336ed16ccc7 to your computer and use it in GitHub Desktop.
Save CheetoMao/dd67a4f69336ed16ccc7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<p>Normally buttons next to each other would double-up on the margin in between them. Using &+& allows you to remove that extra margin when a button is a directly adjacent sibling.</p>
<button>First Button</button>
<button>Following Button</button>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
p {
color: #666;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.6;
padding: 1rem 2rem;
}
button {
background: #E0E0E0;
border: none;
border-radius: 4px;
color: #8e44ad;
cursor: pointer;
font-size: 1.25rem;
margin: 1rem 2rem;
padding: 1rem 2rem;
box-shadow: 0 4px 0px 0 rgba(0,0,0,.3);
&+& {
margin-left: 0;
}
}
p {
color: #666;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.6;
padding: 1rem 2rem;
}
button {
background: #E0E0E0;
border: none;
border-radius: 4px;
color: #8e44ad;
cursor: pointer;
font-size: 1.25rem;
margin: 1rem 2rem;
padding: 1rem 2rem;
box-shadow: 0 4px 0px 0 rgba(0, 0, 0, 0.3);
}
button + button {
margin-left: 0;
}
<p>Normally buttons next to each other would double-up on the margin in between them. Using &+& allows you to remove that extra margin when a button is a directly adjacent sibling.</p>
<button>First Button</button>
<button>Following Button</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment