Skip to content

Instantly share code, notes, and snippets.

@jdlehman
Created September 29, 2014 01:26
Show Gist options
  • Select an option

  • Save jdlehman/4b218c3b9ececd5e39b9 to your computer and use it in GitHub Desktop.

Select an option

Save jdlehman/4b218c3b9ececd5e39b9 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="my-AwesomeBox my-AwesomeBox--small">
<h1 class="my-AwesomeBox-title">Small Box</h1>
</div>
<div class="my-AwesomeBox">
<h1 class="my-AwesomeBox-title">Normal Title</h1>
</div>
<div class="my-AwesomeBox">
<h1 class="my-AwesomeBox-title my-AwesomeBox-title--large">Large Title</h1>
</div>
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
.my-AwesomeBox {
background-color: blue;
border: 1px solid black;
margin: 1rem;
width: 250px;
}
.my-AwesomeBox--small {
width: 100px;
}
.my-AwesomeBox-title {
font-size: 1rem;
color: white;
}
.my-AwesomeBox-title--large {
font-size: 2rem;
}
.my-AwesomeBox {
background-color: blue;
border: 1px solid black;
margin: 1rem;
width: 250px;
}
.my-AwesomeBox--small {
width: 100px;
}
.my-AwesomeBox-title {
font-size: 1rem;
color: white;
}
.my-AwesomeBox-title--large {
font-size: 2rem;
}
<div class="my-AwesomeBox my-AwesomeBox--small">
<h1 class="my-AwesomeBox-title">Small Box</h1>
</div>
<div class="my-AwesomeBox">
<h1 class="my-AwesomeBox-title">Normal Title</h1>
</div>
<div class="my-AwesomeBox">
<h1 class="my-AwesomeBox-title my-AwesomeBox-title--large">Large Title</h1>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment