Skip to content

Instantly share code, notes, and snippets.

@rozzy
Last active August 29, 2015 14:09
Show Gist options
  • Save rozzy/53df994e1f11a6238642 to your computer and use it in GitHub Desktop.
Save rozzy/53df994e1f11a6238642 to your computer and use it in GitHub Desktop.
Auto retina images with background-size
@screenMobile: 320px;
@screenTablet: 768px;
@screenDesktop: 992px;
@screenLarge: 1200px;
@screenExtraLarge: 1600px;
.mobile(@rules, @invert: false) {
.mixin (@invert) when (@invert = false) {
@query: ~"(min-width: @{screenMobile})";
@media @query {
@rules();
};
};
.mixin (@invert) when (@invert = true) {
@query: ~"(max-width: @{screenMobile})";
@media @query {
@rules();
};
};
.mixin(@invert);
};
.tablet(@rules, @invert: false) {
.mixin (@invert) when (@invert = false) {
@query: ~"(min-width: @{screenTablet})";
@media @query {
@rules();
};
};
.mixin (@invert) when (@invert = true) {
@query: ~"(max-width: @{screenTablet})";
@media @query {
@rules();
};
};
.mixin(@invert);
};
.desktop(@rules, @invert: false) {
.mixin (@invert) when (@invert = false) {
@query: ~"(min-width: @{screenDesktop})";
@media @query {
@rules();
};
};
.mixin (@invert) when (@invert = true) {
@query: ~"(max-width: @{screenDesktop})";
@media @query {
@rules();
};
};
.mixin(@invert);
};
.large(@rules, @invert: false) {
.mixin (@invert) when (@invert = false) {
@query: ~"(min-width: @{screenLarge})";
@media @query {
@rules();
};
};
.mixin (@invert) when (@invert = true) {
@query: ~"(max-width: @{screenLarge})";
@media @query {
@rules();
};
};
.mixin(@invert);
};
.extraLarge(@rules, @invert: false) {
.mixin (@invert) when (@invert = false) {
@query: ~"(min-width: @{screenExtraLarge})";
@media @query {
@rules();
};
};
.mixin (@invert) when (@invert = true) {
@query: ~"(max-width: @{screenExtraLarge})";
@media @query {
@rules();
};
};
.mixin(@invert);
};
.image(@img, @type: auto){
@filename : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{img})[1]`;
@extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{img})[2]`;
background-image:~"url(@{imgPath}@{filename}.@{extension})";
.lh-background-size(@type);
&.retina {
background-image:~"url(@{imgPath}@{filename}@2x.@{extension})";
.lh-background-size(@type);
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment