Posted over 2 years ago. Visible to the public.

SASS: Defining linear sizes

Just dumping this in case somebody might need it.

When you need a CSS value (a padding, margin, height etc) to shrink/grow proportionally with the parent element, you normally use percentage values. However, if you need specific values at two given widths, you need to turn to linear functions. The mixin below gives you just that.

// Call with two desired values at two different widths. // Returns a calc() expression that will scale proportionally between those two. // Example: // Spacing should be 15px at 320px parent container width, and 80px at 1150px // parent container width. => linear-scale(320, 15, 1150, 80) @function linear-scale($width1, $spacing1, $width2, $spacing2) // Linear equations: $width1 * $relative + $static = $spacing1 $width2 * $relative + $static = $spacing2 $relative: ($spacing2 - $spacing1) / ($width2 - $width1) $static: $spacing1 - ($width1 * $relative) @return calc(#{$relative * 100%} + #{$static * 1px})
Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Dominik Schöler
Last edit:
over 2 years ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more