Skip to content

Instantly share code, notes, and snippets.

@jdlehman
Created September 29, 2014 01:29
Show Gist options
  • Save jdlehman/f597f4a041f5972653c5 to your computer and use it in GitHub Desktop.
Save jdlehman/f597f4a041f5972653c5 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.4.4)
// Compass (v1.0.1)
// ----
// SUIT CSS descendant selector helper. Keeps CSS flat at root.
@mixin jl-desc($names...) {
@each $name in $names {
@at-root &-#{$name} { @content; }
}
}
// SUIT CSS modifier selector helper. Keeps CSS flat at root.
@mixin jl-mod($names...) {
@each $name in $names {
@at-root &--#{$name} { @content; }
}
}
.my-AwesomeBox {
background-color: blue;
border: 1px solid black;
margin: 1rem;
width: 250px;
// .my-AwesomeBox--small
&--small {
width: 100px;
}
// .my-AwesomeBox-title
&-title {
font-size: 1rem;
color: white;
// .my-AwesomeBox-title--large
&--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