# Sassematics

A presentation at Upfront in in Berlin, Germany by Gunnar Bittersmann Sassematics Gunnar Bittersmann @g16n Goal: scale images to equal area Photos: Gunnar Bittersmann px a·b=A b a a/b=r a=r·b r·b·b=A b² = A / r b = √A / r a = r · √A / r a = √A · r @function sqrt(\$a) { } ? @function height(\$area, \$ratio) { @return sqrt(\$area / \$ratio) * 100%; } @function width(\$area, \$ratio) { @return sqrt(\$area * \$ratio) * 100%; } b = √A / r a = √A · r Babylonian method (Heron’s method) a=2 x0 ≈ √a > 0 xn+1 = (xn + a / xn) / 2 x0 = 1 x1 = (1 + 2 / 1) / 2 = 1.5 x2 = (1.5 + 2 / 1.5) / 2 = 1.41666667 lim xn = √a n→∞ x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… √2 = 1.41421356… Babylonian method (Heron’s method) x0 ≈ √a > 0 @function sqrt(\$a, \$iterations: 10) { \$x: 1; @for \$i from 1 through \$iterations { \$x: (\$x + \$a / \$x) / 2; } xn+1 = (xn + a / xn) / 2 lim xn = √a n→∞ } @return \$x; _math.scss @function sqrt(\$a) { } ! @import “math”; @function height(\$area, \$ratio) { @return sqrt(\$area / \$ratio) * 100%; } @function width(\$area, \$ratio) { @return sqrt(\$area * \$ratio) * 100%; } b = √A / r a = √A · r @import “math”; @function height(\$area, \$ratio) { @return sqrt(\$area / \$ratio) * 100%; } @function width(\$area, \$ratio) { @return sqrt(\$area * \$ratio) * 100%; } @function margin-top(\$area, \$ratio) { @return (100% - height(\$area, \$ratio)) / 2; }    \$area = 1/4; #img1, #img3 { \$ratio: 3/2; height: height(\$area, \$ratio); width: width(\$area, \$ratio); margin-top: margin-top(\$ratio); } #img2 { \$ratio: 2/3; height: height(\$area, \$ratio); width: width(\$area, \$ratio); margin-top: margin-top(\$area, \$ratio); }    \$area = 1/4; .ratio3/2 { \$ratio: 3/2; height: height(\$area, \$ratio); width: width(\$area, \$ratio); margin-top: margin-top(\$ratio); } .ratio2/3 { \$ratio: 2/3; height: height(\$area, \$ratio); width: width(\$area, \$ratio); margin-top: margin-top(\$area, \$ratio); }    \$area = 1/4; [data-ratio=”3/2”] { \$ratio: 3/2; height: height(\$area, \$ratio); width: width(\$area, \$ratio); margin-top: margin-top(\$ratio); } [data-ratio=”2/3”] { \$ratio: 2/3; height: height(\$area, \$ratio); width: width(\$area, \$ratio); margin-top: margin-top(\$area, \$ratio); }    \$area = 1/4; [src^=”img1.jpg”], [src^=”img3.jpg”] { \$ratio: 3/2; height: height(\$area, \$ratio); width: width(\$area, \$ratio); margin-top: margin-top(\$ratio); } [src^=”img2.jpg”] { \$ratio: 3/2; height: height(\$area, \$ratio); width: width(\$area, \$ratio); margin-top: margin-top(\$area, \$ratio); } Goal: scale images to equal area ✔ Photos: Gunnar Bittersmann φ -x-linear-gradient(bottom left, black, white) linear-gradient( #{\$phi}deg, black, white) linear-gradient(to top right, black, white) b tan φ = b / a φ = arctan (b / a) φ a Taylor series: arctan ∞ arctan x = ∑ x2k+1 (−1)k _____ 2k+1 \$pi: 3.14159; @function arctan(\$x, \$terms: 10) { \$sum: 0; \$sign: 1; \$numerator: \$x; \$denominator: 1; @for \$i from 1 through \$terms { \$sum: \$sum + \$sign * \$numerator/\$denominator; \$sign: -1 * \$sign; \$numerator: \$numerator * \$x * \$x; \$denominator: \$denominator + 2; } k=0 5 x3 __ x7 x1 __ x __ __ − − =+ ±… + 3 7 1 5 } @return \$sum;* 180deg / \$pi; Taylor series: sin ∞ sin x = ∑ x2k+1 (−1)k _______ (2k+1)! @function sin(\$x, \$terms: 10) { \$sum: 0; \$sign: 1; \$numerator: \$x; \$denominator: 1; @for \$i from 1 through \$terms { \$sum: \$sum + \$sign * \$numerator/\$denominator; \$sign: -1 * \$sign; \$numerator: \$numerator * \$x * \$x; \$denominator: \$denominator * 2*\$i * (2*\$i+1); } k=0 5 x3 __ x7 x1 __ x __ __ − − =+ ±… + 1! 3! 5! 7! } @return \$sum; Taylor series: cos ∞ cos x = ∑ x2k (−1)k ____ (2k)! @function cos(\$x, \$terms: 10) { \$sum: 0; \$sign: 1; \$numerator: 1; \$denominator: 1; @for \$i from 1 through \$terms { \$sum: \$sum + \$sign * \$numerator/\$denominator; \$sign: -1 * \$sign; \$numerator: \$numerator * \$x * \$x; \$denominator: \$denominator * 2*\$i * (2*\$i-1); } k=0 4 x2 __ x6 x0 __ x __ __ − − =+ ±… + 0! 2! 4! 6! } @return \$sum; Compass + mathematics Gunnar Bittersmann @g16n

Sass + mathematics. Many web developers nowadays use CSS preprocessors, and do simple calculations like (\$a + \$b) * \$c in them. But we can do more. Much more: sin, cos, tan, … and calculate square roots like the ancient Babylonians. A short trip into geometry. Bring your rulers and compasses!

## Video 