Skip to content

Instantly share code, notes, and snippets.

@gerardmrk
gerardmrk / fp.css
Last active February 16, 2017 03:16
PostCSS Fluid Properties Mixin
/*
Original implementation: http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx
*/
@define-mixin fp $property, $min, $max, $start: 320, $end: 1920, $clip: true, $clipAtStart: true, $clipAtEnd: true {
$multiplier: resolve(($max - $min) / ($end - $start) * 100);
$adder: resolve(($min * $end - $max * $start) / ($end - $start));
$formula: calc($(multiplier)vw + $(adder)px);
@if $clip == true and $clipAtStart == true {