Read more

SASS: Defining linear sizes

Dominik Schöler
March 17, 2017Software engineer at makandra GmbH

Just dumping this in case somebody might need it.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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 Show archive.org snapshot . 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})
Posted by Dominik Schöler to makandra dev (2017-03-17 17:41)