# functions

[CSS]() ⟩ [values](values) ⟩ functions

{% hint style="info" %}

{% endhint %}

{% tabs %}
{% tab title="💾 程式" %}
```css
width: calc(10px * pow(5, 2));     /* 10px * 5² = 250px */
```
{% endtab %}

{% tab title="🔴 主題" %}
* [calc](functions/calc "mention")
{% endtab %}

{% tab title="📗 參考" %}
* Modern CSS (2020)
{% endtab %}

{% tab title="📘 手冊" %}
* [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) ⟩ [CSS functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions) ⟩ [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc), [pow()](https://developer.mozilla.org/en-US/docs/Web/CSS/pow)
{% endtab %}
{% endtabs %}

| function                  | note                                                                                                                                  |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| **var**( )                | reference to a [**css variable**](var).                                                                                               |
| **calc**( )               | <p></p><p>supports (+, -, *, /), "<strong>+</strong>" and "<strong>-</strong>" must be <strong>surrounded by whitespace</strong>.</p> |
| **clamp**(min, pref, max) | arguments: the **minimum** size, the **preferred** size, and the **maximum** size.                                                    |
