Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----

// Mixin Breakpoints
@mixin breakpoint($class)
  @if $class == mobile
    @media (max-width: 767px)
      @content
  @else if $class == tablet
    @media (min-width: 768px)
      @content
  @else if $class == desktop
    @media (min-width: 992px)
      @content
  @else if $class == desktop-large
    @media (min-width: 1200px)
      @content
  @else
    @warn "Breakpoint mixin supports: mobile, tablet, desktop, desktop-large"

// Mixin BEM (Block/Element/Modifier)
=c($name)
  &-#{$name}
    @content
=e($name)
  &__#{$name}
    @content
=m($name)
  &--#{$name}
    @content

.kb
  +c(search)
    color: red
    +breakpoint(mobile)
      float: none
      width: 100%
    +e(item)
      color: green
      +m(active)
        color: blue

SassMeister-output.css

.kb-search {
  color: red;
}
@media (max-width: 767px) {
  .kb-search {
    float: none;
    width: 100%;
  }
}
.kb-search__item {
  color: green;
}
.kb-search__item--active {
  color: blue;
}