Last active
August 4, 2017 09:04
-
-
Save Tg7z/73f5dec3e8e399e2504a to your computer and use it in GitHub Desktop.
Less responsive background cover mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // variables | |
| @screen-sm: 768px; | |
| @screen-md: 992px; | |
| @screen-lg: 1025px; | |
| // utility mixin to set value on desired variable | |
| // required as LESS doesn't support something like @break-@{var}: @val =( | |
| .defineBreak(@var, @val) { | |
| .setBreak() when (@var = sm) { | |
| @break-sm: @val; | |
| } | |
| .setBreak() when (@var = md) { | |
| @break-md: @val; | |
| } | |
| .setBreak() when (@var = lg) { | |
| @break-lg: @val; | |
| } | |
| .setBreak(); | |
| } | |
| // mixin to decide if the breakpoint should be set or fallback to previous breakpoint | |
| // will fall back if a src is not defined. | |
| // i.e. if you don't define @mobile the next src will have a min width media query of 0px | |
| .chkSrc(@src, @break, @set, @fallback) when (@src = '') { .defineBreak(@break, @fallback) } | |
| .chkSrc(@src, @break, @set, @fallback) when (default()) { .defineBreak(@break, @set) } | |
| // generate classes and media queries for background cover image | |
| .full-width-bg-image(@name, @path, @desktop: '', @mobile: '', @tabletPortrait: '', @tabletLandscape: '', @xpos: center, @ypos: center) { | |
| // set media breakpoints | |
| @break-xs: 0px; | |
| .chkSrc(@mobile, sm, @screen-sm, @break-xs); | |
| .chkSrc(@tabletPortrait, md, @screen-md, @break-sm); | |
| .chkSrc(@tabletLandscape, lg, @screen-lg, @break-md); | |
| // default styles | |
| .tile-image-@{name} { | |
| background-position: @xpos @ypos; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| & when not (@mobile = '') { | |
| // mobile specific | |
| @media only screen and (min-width: @break-xs) { | |
| @mobile-src: '@{path}@{mobile}'; | |
| .tile-image-@{name} { | |
| background-image: url(@mobile-src); | |
| // IE fallback | |
| .lt-ie9 & { | |
| filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{mobile-src}', sizingMethod='scale')"; | |
| } | |
| } | |
| } | |
| } | |
| & when not (@tabletPortrait = '') { | |
| // tablet specific | |
| @media only screen and (min-width: @break-sm) { | |
| @tabletPortrait-src: '@{path}@{tabletPortrait}'; | |
| .tile-image-@{name} { | |
| background-image: url(@tabletPortrait-src); | |
| // IE fallback | |
| .lt-ie9 & { | |
| filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{tabletPortrait-src}', sizingMethod='scale')"; | |
| } | |
| } | |
| } | |
| } | |
| & when not (@tabletLandscape = '') { | |
| // landscape tablet specific | |
| @media only screen and (min-width: @break-md) { | |
| @tabletLandscape-src: '@{path}@{tabletLandscape}'; | |
| .tile-image-@{name} { | |
| background-image: url(@tabletLandscape-src); | |
| // IE fallback | |
| .lt-ie9 & { | |
| filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{tabletLandscape-src}', sizingMethod='scale')"; | |
| } | |
| } | |
| } | |
| } | |
| & when not (@desktop = '') { | |
| @media only screen and (min-width: @break-lg){ | |
| @desktop-src: '@{path}@{desktop}'; | |
| .tile-image-@{name} { | |
| background-image: url(@desktop-src); | |
| // IE fallback | |
| .lt-ie9 & { | |
| filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{desktop-src}', sizingMethod='scale')"; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Eaxmple call | |
| .full-width-bg-image(@name: img1, @path: '/images/', @desktop: 'img1.jpg', @mobile: 'img1-mobile.jpg', @xpos: center, @ypos: top); | |
| // renders to | |
| .tile-image-img1 { | |
| background-position: center top; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| @media only screen and (min-width: 0px) { | |
| .tile-image-img1 { | |
| background-image: url('/images/img1-mobile.jpg'); | |
| } | |
| .lt-ie9 .tile-image-img1 { | |
| filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/img1-mobile.jpg', sizingMethod='scale'); | |
| } | |
| } | |
| @media only screen and (min-width: 768px) { | |
| .tile-image-img1 { | |
| background-image: url('/images/img1.jpg'); | |
| } | |
| .lt-ie9 .tile-image-img1 { | |
| filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/img1.jpg', sizingMethod='scale'); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment