The following is a responsive mixin you can use if you are or are becoming a fan of Tachyons CSS framework like I have. After a bit of a search online I realize that the whole world has gone package crazy. All I wanted was a simple mixin for the Tachyons responsive breakpoints to add to my SCSS file. So here you are:
@mixin breakpoint($class) {
@if $class == ns {
@media (min-width: 30em) { @content; }
}
@else if $class == m {
@media (min-width: 30em) and (max-width: 60em) { @content; }
}
@else if $class == l {
@media (min-width: 60em) { @content; }
}
@else {
@warn "Breakpoint mixin supports: ns, m, l";
}
}
And you can use it like this:
.navigation__dropdown {
width: 100%;
@include breakpoint(l) {
width: 50%;
}
}
Ta-da no packages just a simple copy and paste.