Mixins LESS.less

/**** Utils ****/
.font(@size) {
  font-size: @size;
  line-height: @size;
}

.size(@width, @height) {
  width: @width;
  height: @height;
}

.text-indent() {
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/**** Media Queries ****/

@portrait: ~"(max-aspect-ratio: 1/1)";
@landscape: ~"(min-aspect-ratio: 1/1)";
@phone-portrait: ~"only screen and (max-width: 480px) and " @portrait;
@phone-landscape: ~"only screen and (max-width: 1023px) and " @landscape; /* to be verified */
@tablet-portrait: ~"only screen and (min-width: 481px) and " @portrait;
@tablet-landscape: ~"only screen and (min-width: 1024px) and " @landscape;
@phone: @phone-portrait, @phone-landscape;
@tablet: @tablet-portrait, @tablet-landscape;
@desktop: ~"only screen and (min-width: 1280px)";

.sample h1{
  @media @tablet {
    font-size: @title;
  }
}

/**** Font face ****/
@font-face {
    font-family: 'bebas_neueregular';
    src: url('/fonts/bebasneue-webfont.eot');
    src: url('/fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/bebasneue-webfont.woff') format('woff'),
         url('/fonts/bebasneue-webfont.ttf') format('truetype'),
         url('/fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}