At Break

Usage

  @import 'at-break';

  .col {
    width: 100%;
    @include at-small  { width: 50%; }
    @include at-medium { width: 33%; }
    @include at-large  { width: 25%; }
  }

Output

  .col {
    width: 100%;
  }

  @media (min-width: 768px) {
    .col {
      width: 50%;
    }
  }

  @media (min-width: 992px) {
    .col {
      width: 33%;
    }
  }

  @media (min-width: 1200px) {
    .col {
      width: 25%;
    }
  }