media-queries-mixin

index.html

<div class="col-md-3 col-xs-12">
  Sidebar
</div>
<div class="col-md-9 col-xs-12">
  Content
</div>

media-queries-mixin.markdown

media-queries-mixin ('-' * 19) Mixin creado para evitar repetir código al crear nuestras media queries

A Pen by Andrea Zucchini on CodePen.

License.

style.css

// ========================================================
//                           Variables
// ========================================================

$xs-width: 480px
$md-width: 780px

// ========================================================
//                           Mixins
// ========================================================

@mixin media($break-point: $xs-width, $min-max: max, $measure: width)
  @media all and (#{$min-max}-#{$measure}: $break-point)
    @content

// ========================================================
// ========================================================

*, *:before, *:after
  box-sizing: border-box
html, body
  height: 100%
[class^="col"]
  float: left

.text-center
  text-align: center
  
.col-md-3
  width: (100 / 12) * 3 * 1%
  height: 100 * 1%
  background-color: olive
  @extend .text-center
  
.col-md-9
  width: (100 / 12) * 9 * 1%
  height: 100 * 1%
  background-color: tomato
  @extend .text-center
// ========================================================
//               Ejemplo de uso del mixin
// ========================================================
.col-xs-12
  // Hasta un máximo de 780px color : white
  @include media($md-width)
    color: white
    // Hasta un máximo de 480px width : 100%
  @include media
    width: 100%

html, body
  @include media($md-width)
    height: 50%