Pro Yearly is on sale from $80 to $50! »

Sassematics (upfront 2014)

Sassematics (upfront 2014)

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: https://www.youtube.com/watch?v=IjW_36VlwQc

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

January 14, 2014
Tweet

Transcript

  1. Sassematics Gunnar Bittersmann @g16n

  2. Goal: scale images to equal area Photos: Gunnar Bittersmann

  3. px

  4. r · b · b = A b = √A

    / r a · b = A a / b = r a = r · b b² = A / r a = r · √A / r a = √A · r a b
  5. @function height($area, $ratio) { @return sqrt($area / $ratio) * 100%;

    } @function width($area, $ratio) { @return sqrt($area * $ratio) * 100%; } @function sqrt($a) { } ? b = √A / r a = √A · r
  6. Babylonian method (Heron’s method) a = 2 x0 = 1

    x1 = (1 + 2 / 1) / 2 = 1.5 x2 = (1.5 + 2 / 1.5) / 2 = 1.41666667 x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… √2 = 1.41421356… x0 ≈ √a > 0 xn+1 = (xn + a / xn ) / 2 lim xn = √a n → ∞
  7. @function sqrt($a, $iterations: 10) { $x: 1; @for $i from

    1 through $iterations { $x: ($x + $a / $x) / 2; } @return $x; } x0 ≈ √a > 0 xn+1 = (xn + a / xn ) / 2 lim xn = √a n → ∞ Babylonian method (Heron’s method)
  8. @function height($area, $ratio) { @return sqrt($area / $ratio) * 100%;

    } @function width($area, $ratio) { @return sqrt($area * $ratio) * 100%; } @function sqrt($a) { } b = √A / r a = √A · r @import "math”; ! _math.scss
  9. @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; }
  10. <img src="img1.jpg" id="img1" alt="Collosseum" /> <img src="img2.jpg" id="img2" alt="Collosseum" />

    <img src="img3.jpg" id="img3" alt="Collosseum" /> $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); }
  11. None
  12. <img src="img1.jpg" class="ratio3/2" alt="Collosseum" /> <img src="img2.jpg" class="ratio2/3" alt="Collosseum" />

    <img src="img3.jpg" class="ratio3/2" alt="Collosseum" /> $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); }
  13. <img src="img1.jpg" data-ratio="3/2" alt="Collosseum" /> <img src="img2.jpg" data-ratio="2/3" alt="Collosseum" />

    <img src="img3.jpg" data-ratio="3/2" alt="Collosseum" /> $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); }
  14. <img src="img1.jpg" alt="Collosseum" /> <img src="img2.jpg" alt="Collosseum" /> <img src="img3.jpg"

    alt="Collosseum" /> $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); }
  15. Goal: scale images to equal area ✔ Photos: Gunnar Bittersmann

  16. -x-linear-gradient(bottom left, black, white) linear-gradient( #{$phi}deg, black, white) linear-gradient(to top

    right, black, white) φ
  17. tan φ = b / a a b φ =

    arctan (b / a) φ
  18. @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; } @return $sum; } Taylor series: arctan ∞ ∑ k = 0 arctan x = (−1)k x2k+1 2k+1 _____ ± … __ x1 1 = + $pi: 3.14159; __ x3 3 − __ x5 5 + __ x7 7 − * 180deg / $pi;
  19. @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); } @return $sum; } ∞ ∑ k = 0 sin x = (−1)k x2k+1 (2k+1)! _______ ± … __ x1 1! = + __ x3 3! − __ x5 5! + __ x7 7! − Taylor series: sin
  20. @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); } @return $sum; } ∞ ∑ k = 0 cos x = (−1)k x2k (2k)! ____ ± … __ x0 0! = + __ x2 2! − __ x4 4! + __ x6 6! − Taylor series: cos
  21. Compass + mathematics Gunnar Bittersmann @g16n