# Back to the roots

A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann Back e th o t roots BeispiEl: bildeRgalErie 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 Heron-verfAHren (babyLoniscHEs wuRzElzieHen) 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… Heron-verfAHren (babyLoniscHEs wuRzElzieHen) Babylonian method (Heron’s method) a=2 x0 ≈ √a > 0 xn+1 = (xn + a / xn) / 2 lim xn = √a n ∞ x0 = 1 @function sqrt(\$a) { \$x: 1; @for \$i from 1 through 3 { x1 = (1 + 2 / 1) / 2 = 1.5 \$x: (\$x + \$a / \$x) / 2; x2 = (1.5 + 2 }/ 1.5) / 2 = 1.41666667 x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… @return \$x; } √2 = 1.41421356… Heron-verfAHren (babyLoniscHEs wuRzElzieHen) Babylonian method (Heron’s method) a=2 x0 ≈ √a > 0 xn+1 = (xn + a / xn) / 2 lim xn = √a n ∞ x0 = 1 @function sqrt(\$a) { \$x: 1; \$x: (\$x + \$a / \$x) / 2; x1 = (1 + 2 / 1) / 2 = 1.5 \$x: (\$x + \$a / \$x) / 2; x2 = (1.5 + 2 / 1.5) 2 = 1.41666667 \$x: /(\$x + \$a / \$x) / 2; x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… @return \$x; } √2 = 1.41421356… Heron-verfAHren (babyLoniscHEs wuRzElzieHen) !—area: 0.4; !—a: calc(var(!—area) * var(!—aspect-ratio)); !—x0: !—x1: !—x2: !—x3: 1; calc((var(!—x0) + var(!—a) / var(!—x0)) / 2); calc((var(!—x1) + var(!—a) / var(!—x1)) / 2); calc((var(!—x2) + var(!—a) / var(!—x2)) / 2); width: calc(var(!—x3) * 100%); BeispiEl: bildeRgalErie  Das sind keine Inline-Styles.
Aber das sind Inline-Styles. 💩

Wurzeln ziehen in CSS

• Anwendungsbeispiel: Bildergalerie
• Herons Verfahren
• Umsetzung mit custom properties

## Resources

The following resources were mentioned during the presentation or are useful additional information.

• ### Sassematics

Vortrag bei Upfront, Januar 2014

• ### Zurück zu den Wurzeln – Mathematische Funktionen mit Sass 