Created by
Jan Pozivil
last modified
| $tablet-width: 768px;
$desktop-width: 1024px;
@mixin tablet {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$desktop-width}) {
@content;
}
}
// Usage:
// p {
// font-size: 16px;
// @include tablet {
// font-size: 18px;
// }
// @include desktop {
// font-size: 20px;
// }
// }
|
| tabletWidth = 768px;
desktopSWidth = 1024px;
desktopLWidth = 1440px;
mobile()
@media ( max-width: tabletWidth - 1 )
{block}
tablet( up = true)
if up is false // only tablets
@media (min-width: tabletWidth) and (max-width: desktopSWidth - 1)
{block}
else
@media (min-width: tabletWidth)
{block}
desktop(size = '')
if size is 'S'
@media (min-width: desktopSWidth) and (max-width: desktopLWidth - 1)
{block}
else if size is 'L'
@media (min-width: desktopLWidth)
{block}
else
@media (min-width: desktopSWidth)
{block}
/**
* Now, we can rewrite our example above to use these new mixins.
*
* p
* font-size: 16px;
*
* +tablet()
* font-size: 18px;
*
* +desktop()
* font-size: 20px;
*
* Renders:
* p {
* font-size: 16px;
* @media ()
* }
*/
|
Credit goes to David Walsh, all hail the king!
https://davidwalsh.name/write-media-queries-sass