media-queries-mixin ('-' * 19) Mixin creado para evitar repetir código al crear nuestras media queries
A Pen by Andrea Zucchini on CodePen.
<div class="col-md-3 col-xs-12"> | |
Sidebar | |
</div> | |
<div class="col-md-9 col-xs-12"> | |
Content | |
</div> |
media-queries-mixin ('-' * 19) Mixin creado para evitar repetir código al crear nuestras media queries
A Pen by Andrea Zucchini on CodePen.
// ======================================================== | |
// 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% |