wasser.less

@wasser-viewport-min: 320;
@wasser-viewport-max: 1500;
@wasser-scaling-ratio: 1.5;
@wasser-scaling-ratio-font: 1.25;
@wasser-font-size-to-line-height-ratio: @wasser-scaling-ratio;

/**
 * Basic wasser mixin, generates responsive property.
 * ---
 * @access public
 * ---
 * @param {string} @property - The property to be scaled
 * @param {number} @max — The max value for the property
 * @param {number|string} [@min] - The min value ot the property
 */
.wasser(@property, @max, @min: (@max / @wasser-scaling-ratio)) {
  ._responsive-property(@max, @min, @property);
}

/**
 * Basic wasser mixin for responsive typography.
 * ---
 * @access public
 * ---
 * @param {number} @max — The max value for the property
 * @param {number|string} [@min] - The min value ot the property
 * @param {string} [@property] - The property, defaults to padding
 */
.w-font(@max, @min: (@max / @wasser-scaling-ratio-font), @line-height-ratio: @wasser-font-size-to-line-height-ratio) {
  ._responsive-property(@max, @min, font-size);
  ._responsive-property(@max * @line-height-ratio, @min * @line-height-ratio, line-height);
}

._responsive-property(@max, @min, @property) {
  @viewport-min: @wasser-viewport-min;
  @difference: @wasser-viewport-max - @viewport-min;
  // This is where the magic happens ;)
  @{property}: ~'calc(@{min}px + (@{max} - @{min}) * (100vw - @{wasser-viewport-min}px) / (@{difference}))';

  @media (min-width: ~'@{wasser-viewport-max}px') {
    @{property}: ~'@{max}px';
  }

  @media (max-width: ~'@{viewport-min}px') {
    @{property}: ~'@{min}px';
  }

  @media print {
    @{property}: ~'@{max}px';
  }
}