responsive-place.less

@screen-xs: 320px;
@screen-sm: 480px;
@screen-md: 960px;
@screen-lg: 1200px;
.box {
  //.responsive-place-top(10px, 8px, 6px, 4px, 2px);
  .responsive-place(top, 2px, 4px, 6px, 8px, 10px);
  .responsive-place(left, 8px, 10px, 20px);
}


.top(@val) {
  top: @val;
}

.responsive-place-top(@default-top, @lg-top, @md-top: @lg-top, @sm-top, @xs-top ) {
    .top(@default-top);

    @media(min-width:@screen-xs) {
        .top(@xs-top);
    }

    @media(min-width:@screen-sm) {
        .top(@sm-top);
    }

    @media(min-width:@screen-md) {
        .top(@md-top);
    }

    @media(min-width:@screen-lg) {
        .top(@lg-top);
    }
}

.responsive-place(@place, @default, @xs, @sm: @xs, @md: false, @lg: false) {
    @{place}: @default;

    @media(min-width:@screen-xs) {
        @{place}: @xs;
    }

    @media(min-width:@screen-sm) {
        @{place}: @sm;
    }
    & when not (@md = false) {
        @media(min-width:@screen-md) {
            @{place}: @md;
        }
    }

    & when not (@lg = false) {
        @media(min-width:@screen-lg) {
            @{place}: @lg;
        }
    }
}