---
layout: documentation
doc-tab: overview
doc-subtab: functions
---

{% include subnav-overview.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Functions</h1>
    <h2 class="subtitle">Utility functions to calculate colors and other values</h2>

    <hr>

    <div class="content">
      <p>Bulma uses 5 custom functions to help define the values and colors dynamically:</p>
      <ul>
        <li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
        <li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
        <li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
        <li><code>removeUnit($number)</code>: removes the unit of a Sass number. So "10px" becomes "10" and "3.5rem" returns "3.5". Used for string concatenation.</li>
        <li><code>roundToEvenNumber($number)</code>: rounds a number to the closest but lower even one. So 23 becomes 22, and 7.5 returns 6.</li>
      </ul>
    </div>
  </div>
</section>