Skip to content

Instantly share code, notes, and snippets.

@rozzy

rozzy/devices-mixins.less

Last active August 29, 2015 14:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rozzy/53df994e1f11a6238642 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rozzy/53df994e1f11a6238642 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rozzy revised this gist Nov 11, 2014. 1 changed file with 85 additions and 0 deletions.
    85 changes: 85 additions & 0 deletions devices-mixins.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,85 @@
    @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);
    };
  2. rozzy renamed this gist Nov 10, 2014. 1 changed file with 0 additions and 0 deletions.
    0 Auto retina images with background-size → retinize.less
    View file
    File renamed without changes.
  3. rozzy created this gist Nov 10, 2014.
    12 changes: 12 additions & 0 deletions Auto retina images with background-size
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    .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);
    };
    };