Mixins pour Media Queries en SCSS
Déclaration de mixins prennant en compte une variable de taille pour travailler en responsive. Grâce à @content, transmission des blocs de code entiers.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@mixin mediamaxwidth($max){ @media screen and (max-width:$max){ @content; } } @mixin mediaminwidth($min){ @media screen and (min-width:$min){ @content; } } @mixin mediamaxheight($max){ @media screen and (max-height:$max){ @content; } } @mixin mediaminheight($min){ @media screen and (min-height:$min){ @content; } } |
Usage :
|
1 2 3 4 5 |
@include mediamaxwidth(980px){ body{ background:SlateBlue; } } |