// Breakpoints
@mixin bp-large {
@media only screen and (max-width: 60em) {
@content;
}}
@mixin bp-medium {
@media only screen and (max-width: 40em) {
@content;
}}
@mixin bp-small {
@media only screen and (max-width: 30em) {
@content;
}}
//Usage
.sidebar {
width: 60%;
float: left;
margin: 0 2% 0 0;
@include bp-small {
width: 100%;
float: none;
margin: 0;
}}
//Output
.sidebar {
width: 60%;
float: left;
margin: 0 2% 0 0;
@media only screen and (max-width: 30){
.sidebar{width: 100%; float: none; margin: 0;}
}}
Easy to use breakpoints mixin for Sass
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.