Skip to content

Instantly share code, notes, and snippets.

@zucchinidev
Forked from anonymous/index.html
Last active August 29, 2015 14:22
Show Gist options
  • Save zucchinidev/315b38fa3256bd9d086b to your computer and use it in GitHub Desktop.
Save zucchinidev/315b38fa3256bd9d086b to your computer and use it in GitHub Desktop.
<div class="col-md-3 col-xs-12">
Sidebar
</div>
<div class="col-md-9 col-xs-12">
Content
</div>
// ========================================================
// 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%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment